/* =====================================================================
   INCOTEM — Experiencia fullscreen (estilo showcase)
   8 pantallas · cromo fijo · riel derecho · contador global
   Paleta: negro institucional + acento lima · Anton + JetBrains Mono
   ===================================================================== */

:root {
  --bg:        #0A0A0A;
  --bg-2:      #131313;
  --surface:   #1a1a1a;
  --line:        rgba(255,255,255,0.085);
  --line-strong: rgba(255,255,255,0.16);
  --ink:       #ededed;
  --ink-mute:  #9c9c9c;
  --ink-faint: #888888; /* subido desde #6a6c69 para alcanzar contraste AA (~4.5:1) */
  --accent:    #e6fe2c;
  --accent-dim:rgba(230,254,44,0.14);
  --on-accent: #0A0A0A;

  --font-display: 'Anton', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --pad-x: clamp(28px, 6vw, 110px);
  --pad-r: clamp(28px, 14vw, 230px);   /* despeja el riel derecho */
  --pad-y: clamp(72px, 11vh, 130px);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
/* La barra del navegador en iOS toma de aquí su tinte: esquema oscuro y fondo
   negro, para que nunca muestree el lima de un botón cercano al borde. */
html { background: #0A0A0A; color-scheme: dark; }
body { background-color: #0A0A0A; overscroll-behavior-y: none; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.75;
  overflow: hidden;                    /* modo slides: sin scroll nativo */
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; background: none; border: 0; color: inherit; }
::selection { background: var(--accent); color: var(--on-accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
p { text-wrap: pretty; }

/* ============================================================ CROMO FIJO */
.chrome__logo {
  position: fixed; top: clamp(20px, 3.5vh, 36px); left: var(--pad-x);
  z-index: 60; display: block;
}
.chrome__logo img { height: 30px; width: auto; }
.chrome__logo .logo-txt {
  font-family: var(--font-display); font-weight: 400;
  font-size: 19px; letter-spacing: 0.08em; color: var(--ink);
}

.chrome__tel {
  position: fixed; top: clamp(22px, 3.6vh, 38px); right: var(--pad-x);
  z-index: 60;
  font-size: 12px; letter-spacing: 0.08em;
  color: var(--ink-faint);
}
.chrome__tel b { color: var(--ink); font-weight: 600; }

/* Riel derecho: línea vertical + puntos + etiquetas */
.rail {
  position: fixed; top: 0; bottom: 0; right: clamp(18px, 3.2vw, 52px);
  z-index: 60;
  display: flex; flex-direction: column; justify-content: center; gap: 12px;
}
.rail::before {
  content: ''; position: absolute; top: 0; bottom: 0; right: 3px;
  width: 1px; background: var(--line);
}
.rail__item {
  position: relative; display: flex; align-items: center; gap: 14px;
  justify-content: flex-end;
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-faint);
  padding: 9px 20px 9px 0; /* objetivo de toque más alto (~40px) */
  transition: color .35s var(--ease);
}
.rail__item i {
  position: absolute; right: 0; top: 50%;
  width: 7px; height: 7px; border-radius: 50%;
  transform: translateY(-50%);
  background: #2c2e2e;
  transition: background .35s var(--ease), box-shadow .35s var(--ease);
}
.rail__item:hover { color: var(--ink-mute); }
.rail__item.on { color: var(--ink); }
.rail__item.on i { background: var(--accent); box-shadow: 0 0 0 4px var(--accent-dim); }

/* Foco visible por teclado (accesibilidad) */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.svc-row:focus-visible, .pj-tab:focus-visible { outline-offset: -3px; }
.svc-row:focus-visible .svc-row__name { color: var(--ink); }

/* Contador global abajo-izquierda */
.chrome__count {
  position: fixed; left: var(--pad-x); bottom: clamp(20px, 4vh, 40px);
  z-index: 60;
  display: flex; align-items: baseline; gap: 10px;
}
.chrome__count b {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(28px, 3vw, 40px); line-height: 1;
  color: var(--ink); letter-spacing: 0.02em;
}
.chrome__count span { font-size: 11px; color: var(--ink-faint); letter-spacing: 0.14em; }

/* Social / contacto directo abajo-derecha */
.chrome__social {
  position: fixed; right: var(--pad-r); bottom: clamp(24px, 4.4vh, 44px);
  z-index: 60;
  display: flex; align-items: center; gap: 28px;
}
.chrome__social a {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-faint);
  transition: color .3s var(--ease);
}
.chrome__social a:hover { color: var(--accent); }
.chrome__social svg { width: 13px; height: 13px; fill: currentColor; }

/* ============================================================ SLIDES */
.slides { position: fixed; inset: 0; }
.slide {
  position: absolute; inset: 0; overflow: hidden;
  visibility: hidden; opacity: 0;
  pointer-events: none;
  transition: opacity .65s var(--ease), visibility 0s linear .65s;
}
.slide.on {
  visibility: visible; opacity: 1; pointer-events: auto;
  transition: opacity .65s var(--ease);
  /* Scroll de rescate: si el contenido no cabe en pantallas bajas
     (portátiles, ventana reducida, zoom), la pantalla activa se
     desplaza en lugar de recortar el contenido. */
  overflow-y: auto; overflow-x: hidden;
  scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
}
.slide.on::-webkit-scrollbar { width: 8px; }
.slide.on::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 8px; }

/* Revelado escalonado del contenido */
@media (prefers-reduced-motion: no-preference) {
  .slide [data-r] {
    opacity: 1; transform: none;
    transition: opacity .8s var(--ease), transform .8s var(--ease);
    transition-delay: var(--d, 0s);
  }
  .slide:not(.on) [data-r] { opacity: 0; transform: translateY(26px); transition: none; }
}

.sw {
  position: relative; z-index: 2; height: 100%;
  display: flex; flex-direction: column; justify-content: flex-start;
  padding: var(--pad-y) var(--pad-r) var(--pad-y) var(--pad-x);
}

/* Cabecera de pantalla: barra lima + eyebrow + título */
.thead { position: relative; padding-left: clamp(16px, 1.8vw, 28px); }
.thead::before {
  content: ''; position: absolute; left: 0; top: 0.35em; bottom: 0.12em;
  width: 4px; background: var(--accent);
}
.thead .eyebrow {
  display: block;
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 10px;
}
.thead h2 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(34px, 4.6vw, 64px); line-height: 1.02;
  letter-spacing: 0.015em; text-transform: uppercase;
  text-wrap: balance;
}

/* Botón primario — discreto: enlace tipográfico con flecha y subrayado sutil */
.btn-circ {
  position: relative;
  display: inline-flex; align-items: center; gap: 12px;
  padding: 8px 2px;
  background: none; border: none;
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
  transition: color .3s var(--ease);
}
.btn-circ .dot {
  width: 6px; height: 6px; flex: none; border-radius: 50%;
  background: var(--accent);
  transition: transform .3s var(--ease);
}
.btn-circ .circ {
  display: inline-flex; align-items: center; justify-content: center;
  width: auto; height: auto; border: none; background: none;
  font-size: 14px; color: var(--accent);
}
.btn-circ .circ > i {
  display: inline-block; font-style: normal;
  transition: transform .3s var(--ease);
}
/* línea sutil bajo el texto, se extiende en hover */
.btn-circ::after {
  content: ''; position: absolute;
  left: 0; bottom: 2px; height: 1px; width: 0;
  background: var(--accent);
  transition: width .35s var(--ease);
}
.btn-circ:hover { color: var(--accent); }
.btn-circ:hover::after { width: 100%; }
.btn-circ:hover .circ > i { transform: translateX(4px); }
.btn-circ:hover .dot { transform: scale(1.35); }
.lnk {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-faint);
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 6px;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.lnk:hover { color: var(--accent); border-color: var(--accent); }

/* Flechas de carrusel */
.cbtn {
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--line-strong);
  display: grid; place-items: center;
  color: var(--ink-mute); font-size: 15px;
  transition: border-color .3s var(--ease), color .3s var(--ease), background .3s var(--ease);
}
.cbtn:hover { border-color: var(--accent); color: var(--on-accent); background: var(--accent); }

.ccount { display: flex; align-items: baseline; gap: 8px; }
.ccount b {
  font-family: var(--font-display); font-weight: 400;
  font-size: 26px; line-height: 1; color: var(--ink);
}
.ccount span { font-size: 11px; color: var(--ink-faint); letter-spacing: 0.12em; }

/* ============================================================ 01 INICIO */
#inicio .slide__bg {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(60% 55% at 68% 62%, rgba(230,254,44,0.05), transparent 70%),
    radial-gradient(120% 90% at 50% 110%, rgba(0,0,0,0.6), transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
}
.hero-block {
  position: absolute; z-index: 1;
  right: clamp(300px, 25vw, 470px); top: 6vh; height: 87vh;
  width: clamp(200px, 19vw, 300px);
  overflow: hidden;
  background: linear-gradient(168deg, #eaff45 0%, var(--accent) 55%, #c8de1f 100%);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 26px), calc(100% - 26px) 100%, 0 100%);
}
.hero-block::after {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(135deg, rgba(12,13,13,0.05) 0 2px, transparent 2px 9px);
}
.hero-block__lbl {
  position: absolute; right: 14px; top: 18px; writing-mode: vertical-rl;
  font-size: 10px; font-weight: 700; letter-spacing: 0.34em; text-transform: uppercase;
  color: rgba(12,13,13,0.62);
}
.hero-mach {
  position: absolute; z-index: 1;
  right: clamp(20px, 3vw, 80px); bottom: 8.5vh;
  width: min(68vw, 1180px); height: auto;
  filter: drop-shadow(0 40px 60px rgba(0,0,0,0.55));
}
.hero-floor {
  position: absolute; z-index: 1;
  right: clamp(110px, 12vw, 240px); bottom: 5.5vh;
  width: min(56vw, 920px); height: 64px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,0.7), transparent 70%);
}
.hero-sw {
  max-width: 1500px;
  justify-content: center;
  padding-top: clamp(80px, 14vh, 140px);
}
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: clamp(18px, 3vh, 30px);
}
.hero-eyebrow::before { content: ''; width: 26px; height: 1px; background: var(--accent); }
.hero-title {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(48px, min(10.4vw, 14vh), 168px); line-height: 0.9;
  letter-spacing: 0.005em; text-transform: uppercase;
  max-width: 11ch;
}
.hero-title em { font-style: normal; color: var(--accent); }
/* Entrada del eslogan: cada palabra sube desde su propia máscara (600ms, desfase
   corto). El desplazamiento vive dentro del <i>; la máscara no altera el flujo. */
.hero-title .hw { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .14em; margin-bottom: -.14em; }
.hero-title .hw > i { display: inline-block; font-style: normal; }
@media (prefers-reduced-motion: no-preference) {
  .slide .hero-title .hw > i { opacity: 0; transform: translateY(108%); }
  .slide.on .hero-title .hw > i {
    animation: heroWordUp .6s cubic-bezier(.16,1,.3,1) forwards;
    animation-delay: calc(.14s + var(--w, 0) * .1s);
  }
}
@keyframes heroWordUp { from { opacity: 0; transform: translateY(108%); } to { opacity: 1; transform: translateY(0); } }
/* Jerarquía de CTAs del hero: un solo bloque lima (Contáctenos). "Ver proyectos"
   es enlace de texto en gris con la flecha en lima. */
#inicio .hero-cta .lnk:not(.hero-contact-mob) {
  display: inline-flex; align-items: center; gap: 10px;
  border-bottom: 0; padding-bottom: 0; color: var(--ink-mute);
}
#inicio .hero-cta .lnk:not(.hero-contact-mob)::after {
  content: '\2192'; font-size: 18px; line-height: 1; color: var(--accent);
  transition: transform .3s var(--ease);
}
#inicio .hero-cta .lnk:not(.hero-contact-mob):hover { color: var(--ink); border-color: transparent; }
#inicio .hero-cta .lnk:not(.hero-contact-mob):hover::after { transform: translateX(5px); }
.hero-note {
  margin-top: clamp(14px, 2.2vh, 24px);
  max-width: 54ch;
  color: var(--ink-mute); font-size: 14px;
  border-left: 2px solid var(--accent);
  padding-left: 16px;
}
.hero-note b { color: var(--ink); font-weight: 600; }
.hero-stats {
  margin-top: clamp(18px, 3vh, 36px);
  display: flex; gap: clamp(20px, 3vw, 56px); flex-wrap: nowrap;
  max-width: 70ch;
}
.hstat {
  display: flex; flex-direction: column; gap: 6px;
  border-left: 2px solid var(--accent);
  padding-left: clamp(12px, 1.2vw, 18px);
}
.hstat b {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(28px, 2.8vw, 44px); line-height: 1;
  color: var(--ink);
}
.hstat b sup { font-size: 0.62em; font-weight: 600; color: var(--accent); top: -.42em; margin-left: 2px; }
.hstat span {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-faint);
}

.hero-cta {
  margin-top: clamp(18px, 3vh, 36px);
  display: flex; align-items: center; gap: 42px; flex-wrap: wrap;
}

/* ============================================================ 02 NOSOTROS (incluye capacidades) */
/* Nosotros comparte el lienzo del resto de secciones: sin degradados propios */
#nosotros .slide__bg { position: absolute; inset: 0; z-index: 0; }
/* Banda de introducción: declaración editorial + riel de datos al costado */
.about-lead {
  margin-top: clamp(24px, 4.5vh, 48px);
  display: grid;
  grid-template-columns: minmax(0, 40ch) minmax(0, 2fr) minmax(200px, 244px);
  gap: clamp(20px, 2.4vw, 44px);
  align-items: center;
}
.about-body {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column; justify-content: space-evenly;
}
.about-body > * { margin-top: 0; }
.about-body > .about-lead { margin-top: 0; }
.about-lead__main { align-self: start; }
.about-lead__statement {
  font-size: 13px; line-height: 1.72; color: var(--ink-mute);
  font-weight: 400; text-wrap: pretty;
}
.about-lead__statement strong { color: var(--ink); font-weight: 600; }
.about-lead__support {
  margin-top: clamp(16px, 2.2vh, 24px);
  font-size: 13px; line-height: 1.72;
  color: var(--ink-mute); max-width: 58ch;
}
.about-lead__support strong { color: var(--ink); font-weight: 600; }

.about-lead__meta {
  border-left: 2px solid var(--accent);
  padding-left: clamp(22px, 2.4vw, 40px);
  display: flex; flex-direction: column; gap: clamp(24px, 3.4vh, 38px);
}
.about-lead__lbl {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 12px;
}
.about-since b {
  display: block;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(24px, 2.4vw, 30px); line-height: 1;
  color: var(--ink); letter-spacing: 0.02em;
}
.about-lead__media {
  align-self: center;
  margin-top: clamp(-120px, -10vh, -60px);
  position: relative;
  display: grid; place-items: start center;
  padding: 0 0 clamp(22px, 3vh, 34px);
}
.about-lead__media img {
  width: min(100%, 620px);
  height: auto;
  max-height: clamp(360px, 62vh, 620px);
  object-fit: contain;
  filter: drop-shadow(0 18px 34px rgba(0,0,0,0.6)) drop-shadow(0 4px 10px rgba(0,0,0,0.5));
}
.about-lead__cap {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: clamp(6px, 1.4vh, 14px); white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-faint);
}

/* Las tres disciplinas reutilizan el lenguaje visual de Filosofía (.mvv) */
.about-mvv { margin-top: clamp(24px, 4.5vh, 50px); }

/* ---- Opción C · Trayectoria (sección Nosotros) ---- */
.nos-c__top { max-width: clamp(380px, 32vw, 540px); }
.nos-c__lead { font-size: clamp(13.5px, 1.05vw, 15px); line-height: 1.72; color: var(--ink-mute); margin: 0; max-width: 50ch; }
.nos-c__lead strong { color: var(--ink); font-weight: 600; }
.nos-c__hl { color: var(--accent); }
.nos-c__lead strong { color: var(--ink); font-weight: 600; }
.nos-c__meta { margin-top: clamp(16px, 2.4vh, 24px); padding-top: clamp(13px, 1.8vh, 18px); border-top: 1px solid var(--line); display: flex; align-items: center; gap: clamp(18px, 2vw, 28px); }
.nos-c__lbl { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 6px; }
.nos-c__stats { flex: none; display: flex; gap: clamp(20px, 2.4vw, 34px); }
.nos-c__stat { display: flex; flex-direction: column; gap: 6px; border-left: 2px solid var(--accent); padding-left: clamp(12px, 1.2vw, 16px); }
.nos-c__stat b { font-family: var(--font-display); font-weight: 400; font-size: clamp(22px, 2vw, 28px); line-height: 1; color: var(--ink); letter-spacing: 0.01em; }
.nos-c__stat .nos-c__lbl { margin-bottom: 0; }
.nos-c__sectors { flex: 1 1 auto; padding-left: clamp(18px, 2vw, 28px); border-left: 1px solid var(--line); }
.nos-c__chips { display: flex; gap: 7px; flex-wrap: wrap; }
.nos-c__chips .tag { font-size: 9px; padding: 5px 9px; letter-spacing: 0.1em; }
.nos-c__map { position: absolute; top: clamp(50px, 7vh, 110px); left: calc(clamp(28px, 6vw, 110px) + clamp(380px, 32vw, 540px)); right: clamp(110px, 9vw, 160px); width: auto; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; z-index: 1; pointer-events: none; }
.nos-c__map .nos-c__mapwrap { width: 100%; max-width: clamp(560px, 48vw, 840px); height: auto; transform: translateX(-7%); filter: drop-shadow(0 22px 48px rgba(0,0,0,0.6)); }
.nos-c__cap { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); }
.nos-c__flow { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line-strong); }
#nosotros .about-body { justify-content: flex-start; }
#nosotros .nos-c__top { margin-top: clamp(40px, 7.5vh, 84px); }
#nosotros .nos-c__work { margin-top: auto; margin-bottom: clamp(14px, 3vh, 34px); }
/* Hilo narrativo: etiqueta de capítulo que titula cada bloque (Trayectoria,
   Dónde operamos, Cómo trabajamos) para que nada quede suelto. */
.nos-c__chapter { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink); margin: 0 0 14px; }
.nos-c__chapter::before { content: ''; width: 22px; height: 2px; background: var(--accent); flex: none; }
/* Trayectoria: 2009 + sectores integrados bajo una misma etiqueta */
.nos-c__cred { margin-top: clamp(18px, 2.8vh, 28px); }
.nos-c__cred .nos-c__meta { margin-top: 0; }
.nos-c__since-note { display: block; margin-top: 8px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; color: var(--ink-faint); }
/* Cómo trabajamos: frase puente que explica por qué están las 3 disciplinas */
.nos-c__work-head { margin-bottom: clamp(14px, 2vh, 22px); }
.nos-c__work-lead { font-size: clamp(13.5px, 1.05vw, 15px); line-height: 1.72; color: var(--ink-mute); margin: 0; max-width: 64ch; }
.nos-c__step { padding: clamp(22px, 3.4vh, 30px) clamp(28px, 3vw, 46px) 0 0; position: relative; }
.nos-c__step::before { content: ''; position: absolute; top: -1px; left: 0; width: 40px; height: 2px; background: var(--accent); }
.nos-c__step b { display: block; font-family: var(--font-mono); font-weight: 600; font-size: 12px; line-height: 1; color: var(--accent); letter-spacing: 0.16em; }
.nos-c__step h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(16px, 1.5vw, 20px); letter-spacing: 0.04em; text-transform: uppercase; margin: 9px 0 10px; color: var(--ink); }
.nos-c__step p { font-size: 12px; line-height: 1.6; color: var(--ink-mute); max-width: 32ch; margin: 0; }

.stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(20px, 2.6vw, 48px);
}
.stat b {
  display: block;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(36px, 3.6vw, 56px); line-height: 1;
  letter-spacing: 0.01em;
}
.stat b sup { font-size: 0.62em; font-weight: 600; color: var(--accent); top: -.42em; margin-left: 2px; }
.stat i { display: block; width: 20px; height: 3px; background: var(--accent); margin: 12px 0 10px; }
.stat span { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); }


/* ============================================================ 03 FILOSOFÍA */
/* Filosofía comparte el lienzo del resto de secciones: sin degradados propios ni
   trama extra, la topografía se lee con el mismo peso que en Servicios y Proyectos. */
#filosofia .slide__bg { position: absolute; inset: 0; z-index: 0; }
#filosofia .slide__bg::after { display: none; }

/* ---- Opción A · Manifiesto + pilares + método ---- */
.phil-a {
  flex: 1; min-height: 0;
  margin-top: clamp(24px, 4vh, 46px);
  display: grid; grid-template-columns: 1.32fr 0.9fr;
  gap: clamp(40px, 5vw, 78px); align-items: center;
}
.phil-a__lead { position: relative; }
.phil-a__manifesto {
  position: relative; z-index: 1;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(27px, 3.05vw, 50px); line-height: 1.05;
  letter-spacing: 0.01em; text-transform: uppercase;
  margin: 0; text-wrap: pretty; color: var(--ink);
}
.phil-a__manifesto em { font-style: normal; color: var(--accent); }
.phil-a__pillars {
  position: relative; z-index: 1;
  margin-top: clamp(26px, 4vh, 46px);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.2vw, 30px);
}
.phil-a__pillar { border-top: 1px solid var(--line-strong); padding-top: 14px; }
.phil-a__num { display: block; font-family: var(--font-mono); font-weight: 600; font-size: 12px; line-height: 1; letter-spacing: 0.16em; color: var(--accent); margin-bottom: 10px; }
.phil-a__pillar h4 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(17px, 1.5vw, 20px); letter-spacing: 0.04em; text-transform: uppercase;
  margin: 8px 0 9px; color: var(--ink);
}
.phil-a__pillar p { font-size: 12px; line-height: 1.6; color: var(--ink-mute); margin: 0; }
.phil-a__method {
  align-self: stretch; display: flex; flex-direction: column; justify-content: center;
  border-left: 1px solid var(--line); padding-left: clamp(32px, 3vw, 52px);
}
.phil-a__kicker {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 10px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink);
}
.phil-a__kicker i { width: 22px; height: 2px; background: var(--accent); flex: none; }
.phil-a__kicker em { font-style: normal; color: var(--ink-faint); letter-spacing: 0.16em; }
.phil-a__list {
  list-style: none; margin: clamp(18px, 2.4vh, 26px) 0 0; padding: 0;
  display: flex; flex-direction: column; gap: clamp(15px, 2.2vh, 22px);
}
.phil-a__list li { display: grid; grid-template-columns: 38px 1fr; gap: 16px; align-items: baseline; }
.phil-a__list b { font-family: var(--font-mono); font-weight: 600; font-size: 12px; letter-spacing: 0.16em; color: var(--accent); }
.phil-a__list h5 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(14px, 1.2vw, 16px); letter-spacing: 0.04em; text-transform: uppercase;
  margin: 0 0 5px; color: var(--ink);
}
.phil-a__list p { font-size: 12px; line-height: 1.55; color: var(--ink-mute); margin: 0; }
.mvv {
  margin-top: clamp(28px, 4.5vh, 52px);
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: clamp(24px, 4vw, 70px);
}
.mvv__item { position: relative; border-top: 1px solid var(--line); padding-top: 26px; }
.mvv__item b {
  position: absolute; top: -14px; right: 0;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(54px, 6vw, 88px); line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(230,254,44,0.22);
}
.mvv__item h3 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(20px, 1.9vw, 27px);
  letter-spacing: 0.04em; text-transform: uppercase;
  margin-bottom: 14px;
}
.mvv__item h3::after { content: ''; display: block; width: 20px; height: 3px; background: var(--accent); margin-top: 12px; }
.mvv__item p { color: var(--ink-mute); font-size: 12.5px; max-width: 38ch; }

/* Método: ¿Cómo lo hacemos? */
.method {
  margin-top: clamp(36px, 5.6vh, 68px);
  padding-top: clamp(28px, 4vh, 46px);
  border-top: 1px solid var(--line);
}
.method__head {
  display: flex; align-items: baseline;
  gap: clamp(18px, 2.4vw, 40px); flex-wrap: wrap;
  margin-bottom: clamp(26px, 4vh, 46px);
}
.method__title {
  position: relative; padding-left: clamp(16px, 1.8vw, 28px);
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(20px, 1.9vw, 27px); line-height: 1.05;
  letter-spacing: 0.02em; text-transform: uppercase;
}
.method__title::before {
  content: ''; position: absolute; left: 0; top: 0.12em; bottom: 0.12em;
  width: 4px; background: var(--accent);
}
.method__intro {
  color: var(--ink-faint); font-size: 12px; line-height: 1.6;
  letter-spacing: 0.02em;
}
.method__grid {
  list-style: none;
  counter-reset: pillar;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(20px, 2.6vw, 48px);
}
.pillar {
  counter-increment: pillar;
  position: relative;
  border-top: 1px solid var(--line-strong);
  padding-top: 20px;
}
.pillar::before {
  content: counter(pillar, decimal-leading-zero);
  position: absolute; top: -13px; right: 0;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(30px, 3vw, 46px); line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(230,254,44,0.18);
  user-select: none;
}
.pillar h4 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(15px, 1.4vw, 18px); line-height: 1.14;
  letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--ink);
  min-height: 2.3em;
  margin-bottom: 14px; text-wrap: balance;
}
.pillar p { color: var(--ink-mute); font-size: 12.5px; line-height: 1.6; }

/* ============================================================ 04 SERVICIOS */
/* Fondo fotográfico que cambia según el servicio seleccionado */
.svc-bg { position: absolute; inset: 0; z-index: 0; }
.svc-bg__img {
  position: absolute; inset: 0;
  background-size: cover; background-position: 50% 50%;
  filter: grayscale(1) brightness(0.5) contrast(1.05);
  opacity: 0;
  transition: opacity 0.7s var(--ease);
}
.svc-bg__img.on { opacity: 0.42; }
.svc-bg__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(12,13,13,0.94) 0%, rgba(12,13,13,0.62) 48%, rgba(12,13,13,0.34) 100%),
    linear-gradient(180deg, rgba(12,13,13,0.85) 0%, rgba(12,13,13,0) 30%, rgba(12,13,13,0) 65%, rgba(12,13,13,0.92) 100%);
}
.svc-grid {
  margin-top: clamp(26px, 4.6vh, 48px);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(28px, 5vw, 90px);
  align-items: center;
  flex: 1; min-height: 0;
}
.svc-panel { position: relative; align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
.svc-panel__num {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(110px, 14vw, 210px); line-height: 0.9;
  color: transparent;
  -webkit-text-stroke: 1px rgba(230,254,44,0.28);
  user-select: none;
}
.svc-panel h3 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(24px, 2.6vw, 38px);
  letter-spacing: 0.03em; text-transform: uppercase;
  margin-top: -0.55em;          /* monta el título sobre el número fantasma */
  position: relative;
}
.svc-panel p { margin-top: 16px; color: var(--ink-mute); font-size: 13px; max-width: 44ch; }

.svc-rows { list-style: none; display: flex; flex-direction: column; }
.svc-row {
  display: flex; align-items: flex-start; gap: 22px;
  width: 100%; text-align: left;
  padding: clamp(8px, 1.15vh, 13px) 0;
  border-bottom: 1px solid var(--line);
  transition: padding-left .35s var(--ease);
}
.svc-row__num {
  font-family: var(--font-mono); font-weight: 600;
  font-size: 12px; letter-spacing: 0.16em;
  color: var(--ink-faint);
  line-height: 1.6; flex: none;
  transition: color .3s var(--ease);
}
.svc-row__name {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(15px, 1.5vw, 21px);
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--ink-mute);
  transition: color .3s var(--ease);
}
.svc-row__desc { display: none; }
.svc-row:hover .svc-row__name { color: var(--ink); }
.svc-row.on { padding-left: 14px; border-bottom-color: var(--line-strong); }
.svc-row.on .svc-row__num { color: var(--accent); }
.svc-row.on .svc-row__name { color: var(--ink); }

/* CTA de cotización en servicios: fijada al fondo del panel,
   alineada con la línea inferior de la última fila de servicios */
.svc-cta { position: absolute; left: 0; bottom: 0; margin: 0; }
.svc-lnk-flow { display: none; }

/* ============================================================ SECTORES Y TRIO (en Nosotros) */
.sectors-block {
  margin-top: clamp(28px, 4.6vh, 44px);
  width: fit-content;
  display: flex; flex-direction: column; flex: 1;
}
.sectors { display: grid; grid-template-columns: 1fr; gap: 8px; }
.about-cta { margin-top: auto; padding-top: 28px; }
.about-cta .btn-circ { display: flex; width: 100%; }
.about-cta .btn-circ .circ { margin-left: auto; }
.tag {
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-mute);
  white-space: nowrap; text-align: center;
  border: 1px solid var(--line-strong);
  padding: 9px 11px;
}
.trio { display: flex; flex-direction: column; }
.trio__item {
  display: grid; grid-template-columns: clamp(38px, 3.4vw, 52px) minmax(0, 200px) 1fr;
  gap: clamp(16px, 2.4vw, 36px);
  align-items: center;
  padding: clamp(18px, 3.4vh, 34px) 0;
  border-bottom: 1px solid var(--line);
}
.trio__item:first-child { border-top: 1px solid var(--line); }
.trio__item b {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(26px, 2.6vw, 38px); line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(230,254,44,0.35);
}
.trio__item h3 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(17px, 1.7vw, 24px);
  letter-spacing: 0.04em; text-transform: uppercase;
}
.trio__item p { color: var(--ink-mute); font-size: 12.5px; }

/* ============================================================ 05 PROYECTOS */
/* Variante B · fondo fotográfico full-bleed que cambia por proyecto */
.pj-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.pj-bg__img {
  position: absolute; inset: 0;
  background-size: cover; background-position: 50% 50%;
  filter: grayscale(0.18) brightness(0.66) contrast(1.04);
  opacity: 0; transition: opacity 0.85s var(--ease), transform 9s linear;
  transform: scale(1.04);
}
.pj-bg__img.on { opacity: 1; transform: scale(1.1); }
.pj-bg__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(12,13,13,0.96) 0%, rgba(12,13,13,0.82) 36%, rgba(12,13,13,0.34) 76%, rgba(12,13,13,0.55) 100%),
    linear-gradient(180deg, rgba(12,13,13,0.92) 0%, rgba(12,13,13,0.12) 24%, rgba(12,13,13,0.18) 58%, rgba(12,13,13,0.96) 100%);
}
.pj-stage { margin-top: clamp(22px, 4vh, 44px); flex: 1; min-height: 0; position: relative; }
.pj {
  display: none;
  grid-template-columns: 1fr;
  align-content: end;
  height: 100%;
}
.pj.on { display: grid; }
/* Fotos por-tarjeta: solo se usan en el modo flujo móvil; en escritorio
   manda el fondo a sangre .pj-bg / .svc-bg, así que aquí se ocultan. */
.pj__media, .svc-row__img { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .pj.on { animation: pjIn .6s var(--ease); }
  @keyframes pjIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
}
.pj__info { position: relative; z-index: 2; max-width: min(660px, 60%); align-self: end; padding-bottom: clamp(4px, 1.4vh, 18px); }
.pj__num {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(88px, 11vw, 168px); line-height: 0.82;
  color: transparent;
  -webkit-text-stroke: 1px rgba(230,254,44,0.26);
  user-select: none;
}
.pj__loc {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: clamp(10px, 1.8vh, 20px);
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-faint);
}
.pj__loc::before { content: ''; width: 18px; height: 1px; background: var(--accent); }
.pj__name {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(24px, 2.7vw, 40px); line-height: 1.08;
  letter-spacing: 0.02em; text-transform: uppercase;
  margin-top: 12px;
  text-wrap: balance;
}
.pj__desc { margin-top: 16px; color: var(--ink-mute); font-size: 13px; max-width: 46ch; }
.pj__media { height: min(48vh, 500px); }
.ph {
  height: 100%; position: relative;
  border: 1px solid var(--line);
  background: repeating-linear-gradient(45deg, #141616 0 14px, #111313 14px 28px);
  display: grid; place-items: center;
}
.ph span { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint); }

.pj-foot {
  margin-top: clamp(18px, 3vh, 30px);
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: clamp(24px, 4vw, 60px); flex-wrap: wrap;
}
.pj-index {
  list-style: none; flex: 1; min-width: 280px;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: 1px solid var(--line);
}
.pj-tab {
  display: flex; flex-direction: column; gap: 7px;
  width: 100%; text-align: left; cursor: pointer;
  padding: 13px 12px 0 0;
  border-top: 2px solid transparent;
  margin-top: -1px;
  transition: border-color .35s var(--ease);
}
.pj-tab b {
  font-family: var(--font-mono); font-weight: 600;
  font-size: 12px; letter-spacing: 0.16em; color: var(--ink-faint);
  transition: color .3s var(--ease);
}
.pj-tab span {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(11px, 0.92vw, 14px);
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-mute);
  line-height: 1.15;
  transition: color .3s var(--ease);
}
.pj-tab:hover span { color: var(--ink); }
.pj-tab:hover { border-top-color: var(--line-strong); }
.pj-tab.on { border-top-color: var(--accent); }
.pj-tab.on b { color: var(--accent); }
.pj-tab.on span { color: var(--ink); }
.pj-foot__nav { display: flex; align-items: center; gap: 20px; }
/* Botón sólido en amarillo de marca (Proyectos y Servicios) */
.pj-foot__lnk, .svc-quote {
  background: var(--accent);
  color: var(--bg);
  border-bottom: 0;
  padding: 13px 22px;
  display: inline-flex; align-items: center; gap: 10px;
  transition: background .3s var(--ease), box-shadow .3s var(--ease), transform .25s var(--ease);
}
.pj-foot__lnk::after, .svc-quote::after { content: none; }
.pj-foot__lnk:hover, .svc-quote:hover {
  background: #f1ff66; color: var(--bg);
  box-shadow: 0 0 0 4px var(--accent-dim);
  transform: translateY(-1px);
}




/* ============================================================ 08 CONTACTO */
/* Fondo: mapa oscuro real (estilo tel\u00f3n, no interactivo) */
.ct-map {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
  background: var(--bg);
}
/* El desaturado va SOLO en las teselas: el pin conserva el lima de marca */
.ct-map .leaflet-tile-pane { filter: grayscale(1) brightness(0.85) contrast(1.04); }
.ct-map .leaflet-container { width: 100%; height: 100%; background: var(--bg); font: inherit; }
.ct-map .leaflet-tile { filter: saturate(0); }
/* Degradado que funde el mapa a negro del lado del texto (igual que la ref) */
.ct-map__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(12,13,13,0.98) 0%, rgba(12,13,13,0.92) 30%, rgba(12,13,13,0.5) 68%, rgba(12,13,13,0.74) 100%),
    linear-gradient(180deg, rgba(12,13,13,0.94) 0%, rgba(12,13,13,0.08) 26%, rgba(12,13,13,0.12) 60%, rgba(12,13,13,0.96) 100%);
}
/* Pin de ubicaci\u00f3n en color de marca */
.ct-pin { position: relative; }
.ct-pin__dot {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(12,13,13,0.85), 0 0 16px rgba(230,254,44,0.55);
}
.ct-pin__pulse {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 12px; height: 12px; border-radius: 50%;
  border: 1px solid var(--accent); opacity: 0.6;
}
@media (prefers-reduced-motion: no-preference) {
  body[data-slide="contacto"] .ct-pin__pulse { animation: ctPin 2.4s var(--ease) infinite; }
  @keyframes ctPin {
    0% { width: 12px; height: 12px; opacity: 0.6; }
    100% { width: 46px; height: 46px; opacity: 0; }
  }
}
/* Atribuci\u00f3n del mapa: presente (licencia) pero discreta */
.ct-map .leaflet-control-attribution {
  background: transparent; color: rgba(156,158,155,0.4);
  font-size: 9px; letter-spacing: 0.04em; padding: 2px 6px;
}
.ct-map .leaflet-control-attribution a { color: rgba(156,158,155,0.55); }
.ct-info {
  margin-top: clamp(28px, 5vh, 56px);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3.4vw, 56px);
  max-width: 960px;
}
.cinfo__lbl {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 12px;
}
.cinfo__lbl::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.cinfo__val { display: block; font-size: 12.5px; color: var(--ink-mute); max-width: 30ch; }
a.cinfo__val:hover { color: var(--accent); }

.ct-form { margin-top: clamp(32px, 6vh, 64px); max-width: 880px; }
.ct-form__lbl {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  margin-bottom: 24px;
}
.ct-form__lbl::before { content: ''; width: 4px; height: 16px; background: var(--accent); }
.ct-form__row {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 3vw, 48px);
  align-items: end;
}
.ct-form__row + .ct-form__row { margin-top: clamp(22px, 3.6vh, 38px); }
.ct-form__row--msg { grid-template-columns: 1fr auto; }
.ct-form input, .ct-form textarea {
  width: 100%; background: transparent; border: 0;
  border-bottom: 1px solid var(--line-strong);
  color: var(--ink);
  font-family: var(--font-mono); font-size: 14px;
  padding: 12px 0;
  transition: border-color .3s var(--ease);
}
.ct-form textarea { resize: none; line-height: 1.6; }
.ct-form select {
  width: 100%; background: transparent; border: 0;
  border-bottom: 1px solid var(--line-strong);
  color: var(--ink);
  font-family: var(--font-mono); font-size: 14px;
  padding: 12px 26px 12px 0;
  -webkit-appearance: none; appearance: none; border-radius: 0;
  transition: border-color .3s var(--ease);
  cursor: pointer;
}
.ct-form select:focus { outline: none; border-bottom-color: var(--accent); }
.ct-form select option { color: #ededed; background: #1a1a1a; }
.ct-form select option:checked { color: var(--accent); background: #1a1a1a; }

/* Autocompletado del navegador: mantener fondo oscuro y texto claro
   (el truco del box-shadow interior anula el amarillo/blanco nativo) */
.ct-form input:-webkit-autofill,
.ct-form input:-webkit-autofill:hover,
.ct-form input:-webkit-autofill:focus,
.ct-form textarea:-webkit-autofill,
.ct-form select:-webkit-autofill {
  -webkit-text-fill-color: var(--ink);
  caret-color: var(--ink);
  -webkit-box-shadow: 0 0 0 1000px var(--bg) inset;
          box-shadow: 0 0 0 1000px var(--bg) inset;
  transition: background-color 9999s ease-in-out 0s;
}
.sel { position: relative; }
.sel::after {
  content: '▾'; position: absolute; right: 4px; bottom: 14px;
  color: var(--ink-faint); font-size: 12px; pointer-events: none;
}
.ct-form input::placeholder, .ct-form textarea::placeholder { color: var(--ink-faint); }
.ct-form input:focus, .ct-form textarea:focus { outline: none; border-bottom-color: var(--accent); }
.ct-form .field-note { display: block; font-size: 11px; color: var(--ink-mute); letter-spacing: 0.12em; margin: 0 0 4px; text-transform: uppercase; }
.ct-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.ct-form__ok { margin-top: 18px; font-size: 11px; letter-spacing: 0.06em; color: var(--accent); }
.ct-foot {
  margin-top: clamp(30px, 6vh, 60px);
  display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
  font-size: 10.5px; letter-spacing: 0.1em; color: var(--ink-faint);
}

/* ============================================================ HINT SCROLL */
.hint {
  position: fixed; left: 50%; bottom: clamp(18px, 3.6vh, 34px);
  transform: translateX(-50%);
  z-index: 55;
  display: flex; align-items: center; gap: 10px;
  font-size: 9.5px; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--ink-faint);
  transition: opacity .5s var(--ease);
}
.hint::after {
  content: ''; width: 1px; height: 30px;
  background: linear-gradient(var(--accent), transparent);
}
@media (prefers-reduced-motion: no-preference) {
  .hint::after { animation: hintDrop 2s var(--ease) infinite; }
  @keyframes hintDrop { 0% { transform: scaleY(0); transform-origin: top; } 55% { transform: scaleY(1); transform-origin: top; } 100% { transform: scaleY(1) translateY(8px); opacity: 0; } }
}
body[data-slide="contacto"] .hint { opacity: 0; }

/* ============================================================ 05 FILOSOFÍA */
.phil {
  margin-top: clamp(26px, 4.4vh, 50px);
  flex: 1; min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.42fr) minmax(0, 0.78fr);
  gap: clamp(40px, 5vw, 96px);
  align-items: stretch;
}

/* ---- Identidad: misión · visión · valores ---- */
.phil-id {
  display: flex; flex-direction: column;
  min-height: 0;
}
.phil-id__kicker {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: clamp(16px, 2.4vh, 26px);
}
.phil-id__kicker i { width: 22px; height: 2px; flex: none; background: var(--accent); }
.phil-id__kicker em {
  font-style: normal; color: var(--ink-faint);
  letter-spacing: 0.16em;
}

.phil-id__body {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column; justify-content: center;
  gap: clamp(24px, 4vh, 52px);
  padding: clamp(18px, 3vh, 40px) 0;
}

.phil-stage {
  position: relative; flex: none; min-height: clamp(200px, 26vh, 264px);
}
.phil-card {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: flex-start;
  opacity: 0; visibility: hidden;
  transform: translateY(16px);
  transition: opacity .6s var(--ease), transform .6s var(--ease), visibility 0s linear .6s;
}
.phil-card.on {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.phil-card__ghost {
  position: absolute; top: -0.28em; right: 0; z-index: 0;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(96px, 11vw, 184px); line-height: 0.8;
  color: transparent;
  -webkit-text-stroke: 1px var(--line-strong);
  pointer-events: none; user-select: none;
}
.phil-card.on .phil-card__ghost { animation: philGhost 1s var(--ease); }
@keyframes philGhost { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }
.phil-card__title {
  position: relative; z-index: 1;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(30px, 3.4vw, 52px); line-height: 1.0;
  letter-spacing: 0.02em; text-transform: uppercase;
  color: var(--ink);
}
.phil-card__title::after {
  content: ''; display: block;
  width: clamp(44px, 4.4vw, 64px); height: 3px;
  background: var(--accent);
  margin: clamp(12px, 1.6vh, 18px) 0;
}
.phil-card__text {
  position: relative; z-index: 1;
  font-size: clamp(14px, 1.1vw, 17px); line-height: 1.72;
  color: var(--ink-mute); max-width: 42ch;
}

.phil-tabs {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(10px, 1.4vw, 22px);
}
.phil-tab {
  display: flex; flex-direction: column; gap: 7px;
  text-align: left; padding-top: 14px;
  position: relative;
}
.phil-tab b {
  font-family: var(--font-display); font-weight: 400;
  font-size: 15px; color: var(--ink-faint);
  letter-spacing: 0.04em;
  transition: color .3s var(--ease);
}
.phil-tab span {
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-faint);
  transition: color .3s var(--ease);
}
.phil-tab__bar {
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--line);
  overflow: hidden;
}
.phil-tab__bar::after {
  content: ''; position: absolute; inset: 0;
  background: var(--accent);
  transform: scaleX(0); transform-origin: left;
}
.phil-tab:hover b, .phil-tab:hover span { color: var(--ink-mute); }
.phil-tab.on b { color: var(--ink); }
.phil-tab.on span { color: var(--accent); }
/* barra de progreso que se llena mientras la tarjeta está activa */
.phil-tab.on .phil-tab__bar { background: var(--accent-dim); }
.phil-tab.on .phil-tab__bar::after { animation: philFill var(--phil-dur, 6s) linear forwards; }
@keyframes philFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
body:not([data-slide="filosofia"]) .phil-tab.on .phil-tab__bar::after { animation: none; }

/* ---- Método: flujo escalonado ---- */
.phil-method { display: flex; flex-direction: column; min-height: 0; }
.phil-method__kicker {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: clamp(16px, 2.4vh, 26px);
}
.phil-method__kicker i { width: 22px; height: 2px; flex: none; background: var(--accent); }
.phil-method__kicker em {
  font-style: normal; color: var(--ink-faint);
  letter-spacing: 0.16em;
}
.phil-steps {
  list-style: none; position: relative;
  display: flex; flex-direction: column;
  flex: 1; justify-content: space-between;
  gap: clamp(8px, 1.4vh, 18px);
}
/* línea vertical conectora */
.phil-steps::before {
  content: ''; position: absolute;
  left: clamp(17px, 1.6vw, 21px); top: 8px; bottom: 8px;
  width: 1px; background: var(--line);
}
.phil-step {
  position: relative;
  display: grid; grid-template-columns: clamp(36px, 3.4vw, 44px) 1fr;
  gap: clamp(16px, 1.6vw, 26px);
  align-items: start;
  padding: clamp(8px, 1.2vh, 14px) 0;
}
.phil-step__node {
  position: relative; z-index: 1;
  width: 7px; height: 7px; margin-top: clamp(6px, 0.8vh, 11px);
  justify-self: center;
  border-radius: 50%;
  background: var(--line-strong);
  font-size: 0; color: transparent;
  transition: background .35s var(--ease), box-shadow .35s var(--ease);
}
.phil-step__n {
  font-family: var(--font-display); font-weight: 400;
  font-size: 13px; color: var(--ink-faint);
  margin-right: 8px;
  transition: color .35s var(--ease);
}
.phil-step__c h4 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(13px, 1.1vw, 16px); line-height: 1.08;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink-mute);
  padding-top: clamp(4px, 0.6vh, 9px);
  transition: color .35s var(--ease);
}
.phil-step__c p {
  margin-top: 7px;
  font-size: 12.5px; line-height: 1.6;
  color: var(--ink-faint);
  max-width: 46ch;
  transition: color .35s var(--ease);
}
.phil-step:hover .phil-step__node,
.phil-step:focus-within .phil-step__node {
  border-color: var(--accent); background: var(--accent); color: var(--on-accent);
}
.phil-step:hover .phil-step__c h4 { color: var(--ink); }
.phil-step:hover .phil-step__c p { color: var(--ink-mute); }

/* Identidad: lista expandida con números de contorno */
.phil-steps--id { flex: 1; justify-content: space-between; }
.phil-steps--id .phil-step {
  padding: clamp(16px, 3.4vh, 40px) 0;
  align-items: center;
}
.phil-steps--id .phil-step__c { position: relative; z-index: 1; max-width: calc(100% - clamp(90px, 10vw, 180px)); }
.phil-steps--id .phil-step__c h4 {
  padding-top: 0;
  font-size: clamp(16px, 1.4vw, 20px);
  letter-spacing: 0.05em;
}
.phil-steps--id .phil-step__c p {
  max-width: 100%;
  font-size: clamp(12px, 0.82vw, 13.5px);
  line-height: 1.62;
  color: var(--ink-mute);
  margin-top: clamp(7px, 1vh, 11px);
}
.phil-step__ghost {
  position: absolute; z-index: 0;
  right: clamp(12px, 4vw, 64px); top: 50%; transform: translateY(-50%);
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(46px, 5vw, 84px); line-height: 0.8;
  color: transparent;
  -webkit-text-stroke: 1px var(--line);
  text-stroke: 1px var(--line);
  pointer-events: none; user-select: none;
  transition: -webkit-text-stroke-color .35s var(--ease);
}
.phil-steps--id .phil-step:hover .phil-step__ghost {
  -webkit-text-stroke-color: var(--accent);
  text-stroke: 1px var(--accent);
}

/* =====================================================================
   MODO FLUJO (móvil / pantallas bajas): scroll normal apilado
   ===================================================================== */
@media (max-width: 920px), (max-height: 540px) {
  body { overflow: auto; }
  .slides { position: static; }
  .slide {
    position: relative; inset: auto; overflow: visible;
    visibility: visible; opacity: 1; pointer-events: auto;
    border-bottom: 1px solid var(--line);
  }
  .slide [data-r] { opacity: 1 !important; transform: none !important; }
  .sw {
    height: auto; min-height: 0;
    padding: clamp(64px, 10vh, 96px) 24px;
  }
  /* ===== HERO en móvil: banner recortado (maquinaria + bloque amarillo)
     arriba, y el texto fluye debajo. Antes la maquinaria se encimaba al
     título; ahora vive en su propia franja superior. ===== */
  #inicio { overflow: hidden; }
  #inicio .sw {
    min-height: 100svh; justify-content: flex-start;
    padding-top: clamp(138px, 16.8vh, 160px);
    padding-bottom: clamp(96px, 11svh, 108px);
  }
  .hero-floor { display: none; }
  /* El rótulo vertical se trunca dentro del bloque pequeño en móvil → se oculta */
  .hero-block__lbl { display: none; }
  .hero-block {
    top: clamp(50px, 7vh, 78px); right: clamp(14px, 4.5vw, 34px);
    height: clamp(124px, 17vh, 162px); width: clamp(138px, 40vw, 182px);
  }
  .hero-mach {
    width: min(64vw, 268px); height: auto;
    right: -8px; bottom: auto; top: clamp(58px, 8.5vh, 92px);
  }
  .hero-title { font-size: clamp(30px, 8vw, 44px); }
  #inicio .hero-stats { margin-top: clamp(10px, 1.5vh, 18px); gap: 10px 16px; }
  #inicio .hstat b { font-size: clamp(22px, 5.6vw, 28px); }
  #inicio .hstat span { font-size: 9.5px; }

  .rail, .chrome__count, .hint { display: none; }
  /* Header fijo: el logo y la hamburguesa quedan siempre visibles mientras
     se hace scroll (antes eran 'absolute' y se iban con la primera sección). */
  .chrome__logo {
    position: fixed; top: clamp(13px, 2.4vh, 24px); left: clamp(16px, 4.5vw, 22px);
    z-index: 90;
  }
  .chrome__logo img { height: 26px; }
  .chrome__tel { position: absolute; }
  /* Barra de header SÓLIDA: el contenido al hacer scroll ya no se transparenta
     ni se encima al logo. Borde inferior = límite claro entre header y página. */
  body::before {
    content: ''; position: fixed; top: -64px; left: 0; right: 0;
    height: calc(128px + env(safe-area-inset-top, 0px)); z-index: 88;
    background: #0A0A0A;
    -webkit-backdrop-filter: blur(16px) saturate(1.1); backdrop-filter: blur(16px) saturate(1.1);
    border-bottom: 1px solid var(--line);
    pointer-events: none;
  }
  /* Desvanecido corto bajo la barra para suavizar el corte del contenido */
  body::after {
    content: ''; position: fixed; left: 0; right: 0; z-index: 79;
    top: calc(64px + env(safe-area-inset-top, 0px)); height: 26px;
    background: linear-gradient(to bottom, rgba(12,13,13,0.85), rgba(12,13,13,0));
    pointer-events: none;
  }
  body.menu-open::before, body.menu-open::after { opacity: 0; }
  /* Logo y hamburguesa centrados verticalmente en la barra */
  .chrome__logo { top: calc(env(safe-area-inset-top, 0px) + 15px); }
  .navtoggle { top: calc(env(safe-area-inset-top, 0px) + 6px); }
  /* Un solo botón flotante: WhatsApp. El correo sale del flotante (vive en
     el menú y en Contacto), para que no se amontonen ni tapen contenido. */
  .chrome__social {
    position: fixed; right: clamp(14px, 4.5vw, 20px);
    bottom: calc(clamp(18px, 3.5svh, 28px) + env(safe-area-inset-bottom, 0px));
    flex-direction: row; align-items: center; gap: 10px;
  }
  .chrome__social a span { display: none; }
  .chrome__social a:last-child { display: none; }   /* oculta el correo */
  .chrome__social a {
    width: 54px; height: 54px; border-radius: 50%;
    background: var(--surface); border: 1px solid var(--line-strong);
    justify-content: center;
    box-shadow: 0 12px 28px rgba(0,0,0,0.6);
  }
  .chrome__social svg { width: 23px; height: 23px; }

  .about-lead, .svc-grid { grid-template-columns: 1fr; }
  /* ===== NOSOTROS en móvil: flujo natural desde arriba, aire editorial ===== */
  #nosotros .about-body { flex: none; display: block; }
  #nosotros .nos-c__top { margin-top: 0; }
  .nos-c__top { max-width: none; }
  .nos-c__lead { font-size: 15.5px; line-height: 1.72; }
  .nos-c__lbl { margin-bottom: 8px; }
  .nos-c__meta { flex-direction: column; align-items: stretch; gap: 22px; margin-top: clamp(26px, 4vh, 34px); padding-top: clamp(20px, 3vh, 26px); }
  .nos-c__since b { font-size: 32px; }
  .nos-c__sectors { padding-left: 0; border-left: 0; padding-top: 22px; border-top: 1px solid var(--line); }
  .nos-c__chips { gap: 8px; }
  .nos-c__chips .tag { font-size: 10px; padding: 7px 12px; letter-spacing: 0.12em; }
  /* Mapa: se omite en móvil */
  .nos-c__map { display: none; }
  /* Las tres disciplinas: bloque separado con regla superior, lista vertical
     con divisorias y barra de acento (mismo lenguaje que el Método de Filosofía) */
  .nos-c__flow { grid-template-columns: 1fr; gap: 0; border-top: 0; }
  #nosotros .nos-c__work {
    margin-top: clamp(34px, 5.5vh, 48px);
    padding-top: clamp(26px, 4vh, 36px);
    border-top: 1px solid var(--line-strong);
  }
  #nosotros .nos-c__flow { margin-top: clamp(18px, 2.6vh, 26px); }
  .nos-c__work-lead { font-size: 15px; line-height: 1.6; }
  .nos-c__work-head { margin-bottom: clamp(16px, 2.4vh, 22px); }
  .nos-c__step { padding: 20px 0; border-top: 1px solid var(--line); }
  .nos-c__step:first-child { border-top: 0; padding-top: 0; }
  .nos-c__step::before { display: none; }
  .nos-c__step b { font-size: 11px; }
  .nos-c__step h3 { font-size: 20px; margin: 10px 0 8px; }
  .nos-c__step p { max-width: none; font-size: 15px; line-height: 1.6; }
  .about-lead { gap: 30px; }
  .about-lead__meta { border-left-width: 2px; }
  .about-lead__media { order: -1; min-height: 220px; margin-top: 0; }
  /* Hero: stats en 2×2 (legibles, sin amontonarse) y CTAs compactos */
  .hero-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; max-width: none; flex-wrap: unset; }
  .hstat b { font-size: clamp(26px, 7vw, 34px); }
  .hero-cta { gap: 20px 28px; margin-top: clamp(20px, 3.4vh, 34px); }
  .svc-lnk-flow { display: inline-block; margin-top: 22px; justify-self: start; }
  .pj-ctl { flex-wrap: wrap; gap: 16px; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .mvv { grid-template-columns: 1fr; gap: 40px; }
  .method__head { grid-template-columns: 1fr; gap: 18px; }
  .method__grid { grid-template-columns: repeat(2, 1fr); gap: 28px 24px; }
  .svc-panel { display: none; }                /* en móvil el desc vive en la fila */
  .svc-row { flex-wrap: wrap; }
  .svc-row.on .svc-row__desc {
    display: block; width: 100%;
    font-size: 12.5px; color: var(--ink-mute);
    padding: 6px 0 10px;
  }
  .trio__item { grid-template-columns: auto 1fr; }
  .trio__item p { grid-column: 1 / -1; }
  /* ===== PROYECTOS en móvil: tarjeta del proyecto activo + índice tappable
     debajo. Antes .pj-stage era flex:1 y el contenido del proyecto desbordaba
     ENCIMA del índice (el bug del encime). Ahora todo fluye en columna. ===== */
  #proyectos .sw { justify-content: flex-start; }
  .pj-stage {
    flex: none; min-height: 0;
    margin-top: clamp(16px, 2.6vh, 26px);
  }
  .pj { display: none; height: auto; }
  .pj.on { display: block; }
  .pj__info {
    position: static; max-width: none; align-self: auto;
    padding-bottom: 0;
  }
  .pj__num {
    font-size: clamp(46px, 14vw, 70px); line-height: 0.82;
    color: transparent; -webkit-text-stroke: 1.4px rgba(230,254,44,0.72);
  }
  .pj__loc { margin-top: 10px; font-size: 11px; }
  .pj__name { font-size: clamp(21px, 6vw, 28px); margin-top: 8px; }
  .pj__desc {
    margin-top: 12px; font-size: 12.5px; line-height: 1.55; max-width: none;
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
  }
  /* Índice de proyectos: lista vertical tappable (mismo idioma que Servicios) */
  .pj-foot {
    flex-direction: column; align-items: stretch; gap: clamp(18px, 3vh, 26px);
    margin-top: clamp(18px, 3vh, 28px);
  }
  .pj-index {
    grid-template-columns: 1fr; gap: 0; min-width: 0;
    border-top: 1px solid var(--line-strong);
  }
  .pj-tab {
    flex-direction: row; align-items: baseline; gap: 18px;
    padding: 0 0; min-height: 46px; margin-top: 0;
    border-top: 0; border-left: 0;
    border-bottom: 1px solid var(--line);
    transition: padding-left .35s var(--ease), border-color .3s var(--ease);
  }
  .pj-tab b { font-size: 12px; min-width: 2.1em; flex: none; line-height: 1; color: var(--ink-faint); }
  .pj-tab span { font-size: clamp(14px, 4vw, 16px); letter-spacing: 0.05em; line-height: 1.2; text-transform: none; }
  .pj-tab.on { padding-left: 12px; border-bottom-color: var(--accent); }
  .pj-foot__nav { justify-content: stretch; }
  .pj-foot__lnk { width: 100%; justify-content: center; min-height: 52px; }
  .ct-info { grid-template-columns: 1fr; gap: 20px; }
  .ct-form__row { grid-template-columns: 1fr; }

  /* ===================================================================
     IGUALAR ALTURA — Nosotros · Filosofía · Contacto caben en UNA pantalla
     (referencia: Proyectos), sin scroll interno. Compactado de aire y tipo.
     =================================================================== */
  #nosotros .sw, #filosofia .sw, #contacto .sw {
    padding-top: clamp(42px, 5.6svh, 58px);
    padding-bottom: clamp(74px, 9svh, 90px);
  }
  /* Banda inferior libre para el botón flotante de WhatsApp (no tapa contenido) */
  #servicios .sw, #proyectos .sw { padding-bottom: clamp(74px, 9svh, 92px); }
  #nosotros .thead, #filosofia .thead, #contacto .thead { margin-bottom: 0; }
  /* El contenido CRECE para ocupar toda la pantalla.
     Filosofía reparte sus bloques; Nosotros agrupa intro+mapa arriba y ancla
     las disciplinas abajo, con UNA zona de respiro centrada (el mapa). */
  #nosotros .about-body, #filosofia .phil-a {
    flex: 1 1 auto; min-height: 0;
    display: flex; flex-direction: column;
  }
  #filosofia .phil-a { justify-content: space-between; }
  /* Nosotros: las tres zonas (intro+cobertura · mapa · disciplinas) se REPARTEN
     para llenar la pantalla. El mapa queda de centro y NUNCA se deforma. */
  #nosotros .about-body { justify-content: space-between; }
  #nosotros .nos-c__top { flex: none; }
  #nosotros .nos-c__map { flex: none; margin-top: 0; }
  #nosotros .nos-c__flow { flex: none; margin-top: 0; }
  /* Contenido del contacto agrupado arriba: sin "space-between" no quedan
     huecos enormes entre el título, los datos y el formulario. */
  #contacto .sw { justify-content: flex-start; gap: clamp(4px, 1.5vh, 14px); }

  /* Mapa de México: tamaño natural, centrado, asociado a la cobertura */
  #nosotros .nos-c__map {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 10px; position: static; inset: auto; top: auto; left: auto; right: auto;
    width: auto; margin-left: 0; margin-right: 0; margin-bottom: 0;
    padding: 0; opacity: 1;
  }
  #nosotros .nos-c__map .nos-c__mapwrap {
    width: min(46%, 150px); height: auto; max-width: none; max-height: none;
    transform: none; filter: drop-shadow(0 12px 26px rgba(0,0,0,0.5));
  }
  #nosotros .nos-c__cap { text-align: center; }

  /* ---- Nosotros: bloque superior (intro+meta) arriba, disciplinas abajo ---- */
  #nosotros .nos-c__top, #nosotros .nos-c__flow { flex: none; }
  #nosotros .nos-c__lead { font-size: 12.5px; line-height: 1.4; }
  #nosotros .nos-c__meta {
    flex-direction: row; align-items: baseline; flex-wrap: wrap;
    gap: 7px 20px; margin-top: 11px; padding-top: 10px;
  }
  #nosotros .nos-c__since { flex: none; }
  #nosotros .nos-c__since b { font-size: 19px; }
  #nosotros .nos-c__sectors {
    flex: 1 1 auto; padding-left: 0; padding-top: 0;
    border-left: 0; border-top: 0; min-width: 200px;
  }
  #nosotros .nos-c__lbl { margin-bottom: 5px; }
  #nosotros .nos-c__chips .tag { font-size: 9px; padding: 4px 8px; }
  #nosotros .nos-c__flow { margin-top: 0; padding-top: 10px; }
  #nosotros .nos-c__step { padding: 5px 0; }
  #nosotros .nos-c__step:first-child { padding-top: 0; }
  #nosotros .nos-c__step b { font-size: 10px; }
  #nosotros .nos-c__step h3 { font-size: 14.5px; margin: 4px 0 3px; }
  #nosotros .nos-c__step p { font-size: 11px; line-height: 1.4; }

  /* ---- Filosofía: pilares en 2 col, método en lista; lead y método se
     separan para repartir la altura ---- */
  #filosofia .phil-a { margin-top: 14px; }
  #filosofia .phil-a__lead { flex: none; }
  #filosofia .phil-a__method { flex: none; }
  #filosofia .phil-a__manifesto { font-size: clamp(18px, 4.6vw, 21px); line-height: 1.13; }
  #filosofia .phil-a__pillars { grid-template-columns: 1fr 1fr; gap: 0 22px; margin-top: 13px; }
  #filosofia .phil-a__pillar { padding: 6px 0; }
  #filosofia .phil-a__pillar:nth-child(2) { border-top-color: var(--line-strong); }
  #filosofia .phil-a__num { margin-bottom: 5px; }
  #filosofia .phil-a__pillar h4 { font-size: 15px; margin: 4px 0 3px; }
  #filosofia .phil-a__pillar p { font-size: 11px; line-height: 1.4; }
  #filosofia .phil-a__method { padding-top: 11px; }
  #filosofia .phil-a__list { margin-top: 8px; gap: 6px; }
  #filosofia .phil-a__list li { grid-template-columns: 26px 1fr; gap: 11px; }
  #filosofia .phil-a__list h5 { font-size: 13px; }
  #filosofia .phil-a__list p { font-size: 11.5px; line-height: 1.45; }

  /* ---- Contacto compacto: filas cortas en 2 columnas, aire reducido ---- */
  #contacto .ct-info { grid-template-columns: 1fr 1fr; gap: 16px 20px; margin-top: 22px; }
  #contacto .cinfo__lbl { margin-bottom: 7px; }
  #contacto .cinfo__val { font-size: 12px; }
  #contacto .ct-form { margin-top: 24px; }
  #contacto .ct-form__lbl { margin-bottom: 16px; }
  #contacto .ct-form__row { grid-template-columns: 1fr 1fr; gap: 16px; }
  #contacto .ct-form__row + .ct-form__row { margin-top: 16px; }
  #contacto .ct-form__row--msg { grid-template-columns: 1fr; }
  #contacto .ct-form input, #contacto .ct-form select, #contacto .ct-form textarea { font-size: 13px; padding: 8px 0; }
  #contacto .ct-form .field-note { font-size: 10px; margin-bottom: 3px; }
  #contacto .ct-actions { flex-direction: row; align-items: center; gap: 20px; margin-top: 4px; }
  #contacto .ct-foot { margin-top: 20px; gap: 8px 20px; }
  /* Mapa de contacto: queda como textura tenue para no competir con el formulario */
  .ct-map__scrim {
    background: linear-gradient(180deg, rgba(12,13,13,0.82) 0%, rgba(12,13,13,0.66) 45%, rgba(12,13,13,0.85) 100%);
  }

  /* Estas dos secciones son largas: fluyen desde arriba (sin centrar) con
     aire editorial generoso, en lugar de estirarse para llenar la pantalla. */
  #nosotros .sw, #filosofia .sw { justify-content: flex-start; }

  /* ===== FILOSOFÍA en móvil ===== */
  /* El manifiesto, los pilares y el método se apilan en flujo natural.
     Se elimina el flex:1 + align-items:center que estiraba el grid y abría
     huecos enormes entre bloques. */
  .phil-a {
    flex: none; min-height: 0; display: block;
    margin-top: clamp(26px, 4vh, 38px);
  }
  .phil-a__manifesto { font-size: clamp(25px, 7vw, 32px); line-height: 1.18; }
  /* Pilares Misión/Visión/Valores: apilados en filas legibles (no 3 columnas) */
  .phil-a__pillars { grid-template-columns: 1fr; gap: 0; margin-top: clamp(30px, 5vh, 42px); }
  .phil-a__pillar { border-top: 1px solid var(--line); padding: 16px 0; }
  .phil-a__pillar:first-child { border-top-color: var(--line-strong); }
  .phil-a__num { margin-bottom: 12px; }
  .phil-a__pillar h4 { font-size: 19px; margin: 8px 0 7px; }
  .phil-a__pillar p { font-size: 13px; line-height: 1.6; max-width: 52ch; }
  /* Método: bloque separado con su propia regla superior, no una columna lateral */
  .phil-a__method {
    border-left: 0; padding-left: 0;
    margin-top: clamp(34px, 5.5vh, 48px);
    padding-top: clamp(26px, 4vh, 36px);
    border-top: 1px solid var(--line-strong);
  }
  .phil-a__list { margin-top: clamp(20px, 3vh, 28px); gap: clamp(16px, 2.4vh, 22px); }
  .phil-a__list li { grid-template-columns: 32px 1fr; gap: 14px; }
  .phil-a__list h5 { font-size: 14.5px; }
  .phil-a__list p { font-size: 13px; line-height: 1.6; }
  .phil { grid-template-columns: 1fr; gap: 44px; margin-top: 30px; }
  .phil-stage { min-height: 240px; margin: 18px 0 22px; }
  .phil-card { position: relative; }
  .phil-card:not(.on) { display: none; }
  .phil-card__ghost { font-size: clamp(120px, 34vw, 200px); }
  .phil-steps { gap: 8px; }
  .phil-steps::before { top: 22px; bottom: 22px; }
}

/* =====================================================================
   PAGINACIÓN TIPO "TIKTOK" — una sección por pantalla, salta al deslizar.
   Solo en teléfonos/tablets (≤920px), donde la navegación JS está apagada
   y todo es CSS puro. En escritorio (incl. ventanas bajas) no aplica.
   ===================================================================== */
/* =====================================================================
   SCROLL CONTINUO NATURAL (móvil ≤920px). Cada sección es una "pantalla"
   centrada que se siente premium, pero si su contenido es más alto la
   sección CRECE y la página se desplaza — nunca recorta ni encima.
   La navegación JS está apagada en este modo (todo es flujo nativo).
   ===================================================================== */
@media (max-width: 920px) {
  body { overflow-x: hidden; }

  .slide {
    min-height: 100svh;
    height: auto; overflow: visible;
    display: flex; flex-direction: column;
    border-bottom: 0;
    scroll-margin-top: 54px;     /* compensa el header fijo al anclar */
  }
  .slide + .slide .sw { border-top: 0; }

  .sw {
    flex: 1 1 auto; min-height: 0; height: auto;
    justify-content: center;
    overflow: visible;
    padding: clamp(92px, 14vh, 124px) 22px clamp(80px, 12vh, 108px);
  }

  #inicio .sw {
    justify-content: flex-start;
    padding-bottom: clamp(96px, 11svh, 108px);
  }
}

/* Aparición al hacer scroll (móvil): cada ELEMENTO [data-r] entra cuando
   llega al viewport — premium y escalonado, no toda la sección de golpe.
   Fail-safe: sin JS (sin .has-js) o con reduce-motion, todo se ve. */
@media (max-width: 920px) and (prefers-reduced-motion: no-preference) {
  html.has-js .slide [data-r] {
    opacity: 0 !important; transform: translateY(18px) scale(0.99) !important;
    transition: opacity .72s var(--ease), transform .72s var(--ease);
    transition-delay: var(--d, 0s);
    will-change: opacity, transform;
  }
  html.has-js .slide [data-r].revealed {
    opacity: 1 !important; transform: none !important;
  }
}

/* =====================================================================
   NAVEGACIÓN MÓVIL — hamburguesa, menú a pantalla completa y dots
   ===================================================================== */
.navtoggle, .menu, .pager, .sec-cta-top, .hero-contact-mob, .chap { display: none; }

@media (max-width: 920px) {
  /* --- Hamburguesa --- */
  .navtoggle {
    display: flex; flex-direction: column; justify-content: center; gap: 6px;
    position: fixed; top: clamp(12px, 2.4vh, 24px); right: clamp(12px, 4.2vw, 20px);
    z-index: 90; width: 48px; height: 48px; padding: 0 11px;
    background: rgba(12,13,13,0.55);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border: 1px solid var(--line); border-radius: 11px; cursor: pointer;
    transition: border-color .3s var(--ease), background .3s var(--ease);
  }
  .navtoggle span {
    display: block; height: 2px; width: 100%; background: var(--ink); border-radius: 2px;
    transition: transform .42s var(--ease), opacity .3s var(--ease);
  }
  .navtoggle[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
  .navtoggle[aria-expanded="true"] span:last-child  { transform: translateY(-4px) rotate(-45deg); }

  /* el teléfono del cromo vive ahora dentro del menú */
  .chrome__tel { display: none; }

  /* --- Overlay del menú --- */
  .menu {
    display: block; position: fixed; inset: 0; z-index: 85;
    background: rgba(10,11,11,0.97);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .5s var(--ease), visibility 0s linear .5s;
  }
  .menu.open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .5s var(--ease); }
  .menu__inner {
    height: 100%; display: flex; flex-direction: column;
    padding: clamp(74px, 13vh, 120px) clamp(26px, 7vw, 48px) clamp(36px, 6vh, 56px);
    gap: clamp(22px, 3.4vh, 36px);
  }
  .menu__eyebrow {
    font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.24em;
    text-transform: uppercase; color: var(--ink-faint);
  }
  .menu__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
  .menu__links li { border-top: 1px solid var(--line); }
  .menu__links li:last-child { border-bottom: 1px solid var(--line); }
  .menu__links a {
    display: flex; align-items: baseline; gap: 18px; padding: clamp(13px, 1.8vh, 18px) 4px;
    text-decoration: none; opacity: 0; transform: translateY(16px);
  }
  .menu.open .menu__links a { animation: menuIn .5s var(--ease) forwards; }
  .menu.open .menu__links li:nth-child(1) a { animation-delay: .08s; }
  .menu.open .menu__links li:nth-child(2) a { animation-delay: .14s; }
  .menu.open .menu__links li:nth-child(3) a { animation-delay: .20s; }
  .menu.open .menu__links li:nth-child(4) a { animation-delay: .26s; }
  .menu.open .menu__links li:nth-child(5) a { animation-delay: .32s; }
  .menu.open .menu__links li:nth-child(6) a { animation-delay: .38s; }
  @keyframes menuIn { to { opacity: 1; transform: none; } }
  .menu__links b {
    font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em;
    color: var(--accent); flex: none;
  }
  .menu__links span {
    font-family: var(--font-display); font-weight: 400;
    font-size: clamp(30px, 9vw, 48px); line-height: 1;
    letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink);
    transition: color .3s var(--ease);
  }
  .menu__links a:hover span, .menu__links a:active span { color: var(--accent); }
  .menu__foot { margin-top: auto; display: flex; flex-direction: column; gap: 14px; }
  .menu__row { display: flex; flex-direction: column; gap: 4px; text-decoration: none; }
  .menu__row span {
    font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.2em;
    text-transform: uppercase; color: var(--ink-faint);
  }
  .menu__row b { font-weight: 500; font-size: 14px; color: var(--ink); letter-spacing: 0.02em; }

  /* --- Dots de paginación (sección actual): en el borde, sin rozar el texto --- */
  .pager {
    display: flex; flex-direction: column; gap: 10px; align-items: center;
    position: fixed; right: 6px; top: 50%; transform: translateY(-50%);
    z-index: 70; padding: 8px 4px; transition: opacity .4s var(--ease);
  }
  .pager__dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: rgba(232,232,228,0.22);
    transition: background .35s var(--ease), transform .35s var(--ease);
  }
  .pager__dot.on { background: var(--accent); transform: scale(1.5); }
  body.menu-open .pager { opacity: 0; pointer-events: none; }
}

/* =====================================================================
   CAPA FINAL MÓVIL — "RESPIRAR" (scroll continuo)
   Anula toda la compresión que servía para meter cada sección en una sola
   pantalla. Ahora la página fluye: tipografía legible (16px base), una
   columna, ritmo vertical generoso. Va al final → gana por cascada.
   ===================================================================== */
@media (max-width: 920px) {

  /* La paginación por puntos no aplica en scroll continuo */
  .pager { display: none !important; }

  /* --- Ritmo base: cada sección es una PANTALLA con límites claros --- */
  .slides { counter-reset: sec; }
  .slide {
    counter-increment: sec;
    min-height: 100svh;                      /* cada sección llena la pantalla */
    scroll-margin-top: 56px;
  }
  /* Topografía visible en móvil (la guía la pide): subimos la intensidad de la
     capa ambiental global y NO la tapamos con fondos sólidos. */
  :root { --amb: 0.085; }
  /* Cada sección recibe una textura topográfica propia sobre su fondo, para que
     ninguna se vea plana — incluso las que tienen degradado (inicio/nosotros). */
  .slide__bg { position: absolute; inset: 0; z-index: 0; }
  /* Fondo UNIFORME: ninguna sección tiñe ni aclara/oscurece su fondo. Todas
     comparten el mismo lienzo (ambiente global continuo) y la misma textura
     topográfica. Se anulan los degradados por-sección. */
  #inicio .slide__bg, #servicios .slide__bg, #proyectos .slide__bg,
  #nosotros .slide__bg, #filosofia .slide__bg, #contacto .slide__bg {
    background: transparent !important;
  }
  #filosofia .slide__bg::after { display: none !important; }
  /* Una sola textura: la capa ambiental GLOBAL ya provee la topografía continua.
     La textura por-sección sobra y, en secciones de fondo transparente (Nosotros,
     Filosofía), se veía superpuesta a la global. Se elimina. */
  .slide__bg::before { display: none !important; }
  /* Sin tintes ni divisorias entre secciones: la topografía fluye continua y
     cada sección se distingue por su encabezado (barra lima + eyebrow + título),
     no por un corte duro. */
  .sw {
    background: transparent;
    justify-content: flex-start !important;
    padding: clamp(84px, 13vh, 112px) 22px clamp(64px, 10vh, 88px) !important;
    gap: 0; position: relative;
  }
  /* Más aire bajo el contacto por el botón flotante de WhatsApp */
  #contacto .sw { padding-bottom: clamp(96px, 14vh, 124px) !important; }
  /* Flujo continuo: sin divisoria dura entre secciones */
  .slide + .slide .sw { border-top: 0; }

  /* --- Encabezado de sección: número · etiqueta · título, apilados y aireados --- */
  .thead {
    margin-bottom: clamp(26px, 4.4vh, 40px) !important;
    padding-top: 2px;
  }
  /* El badge numérico se elimina en móvil: heredaba la barra-lima absoluta del
     header base y salía aplastado sobre el eyebrow. Queda barra lima + eyebrow
     + título, limpio. Los límites de sección los dan el borde y el tono. */
  .eyebrow {
    font-size: 11px; letter-spacing: 0.2em; line-height: 1.6;
    display: block; margin-bottom: 16px !important; color: var(--ink-faint);
    max-width: 34ch;
    /* Una sola línea SIEMPRE → el título de cada sección queda a la misma
       altura sin importar el largo del texto superior */
    height: 1.6em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .thead h2 {
    font-size: clamp(44px, 13vw, 64px); line-height: 1.0;
    letter-spacing: 0.018em;
  }

  /* --- CTA de secci\u00f3n: pegajoso bajo el header, refleja la selecci\u00f3n --- */
  .sec-cta-top {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; min-height: 54px; padding: 0 18px;
    margin: 0 0 clamp(22px, 3.6vh, 30px);
    position: sticky; top: calc(56px + env(safe-area-inset-top, 0px)); z-index: 45;
    border: 1px solid var(--accent); border-radius: 7px;
    background: rgba(16,17,17,0.94);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    color: var(--ink); text-decoration: none;
    font-family: var(--font-mono); font-size: 12px; font-weight: 600;
    letter-spacing: 0.12em; text-transform: uppercase;
    box-shadow: 0 10px 24px rgba(0,0,0,0.45);
    transition: background .3s var(--ease);
  }
  .sec-cta-top span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sec-cta-top i { color: var(--accent); font-style: normal; font-size: 17px; flex: none; margin-left: 12px; }
  .sec-cta-top:active { background: rgba(230,254,44,0.12); }
  /* En m\u00f3vil el CTA vive arriba \u2192 se ocultan los del fondo para no duplicar */
  #servicios .svc-lnk-flow, #proyectos .pj-foot__nav { display: none !important; }

  /* --- Tarjeta SELECCIONADA (servicios / proyectos): se ilumina --- */
  #servicios .svc-row.picked, #proyectos .pj.picked {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 1px var(--accent), 0 14px 30px rgba(0,0,0,0.5);
  }
  #servicios .svc-row.picked .svc-row__num { color: var(--accent); }
  /* check de selecci\u00f3n */
  #servicios .svc-row, #proyectos .pj { position: relative; }
  #servicios .svc-row.picked::after, #proyectos .pj.picked::after {
    content: '\2713'; position: absolute; top: 12px; right: 12px; z-index: 5;
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--accent); color: #0A0A0A;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; font-weight: 700;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  }
  /* sugerencia t\u00e1ctil */
  #servicios .svc-row, #proyectos .pj { cursor: pointer; }

  /* ============ HERO (móvil): SIN excavadora, contacto de primeras ============ */
  /* La excavadora y el panel lima se omiten en teléfono (la guía: evitar héroes
     que dominen la pantalla). El texto sube y el botón Contáctanos queda visible
     en la primera pantalla. */
  #inicio .hero-block, #inicio .hero-mach, #inicio .hero-floor { display: none !important; }
  #inicio .hero-sw {
    padding-top: clamp(80px, 11vh, 100px) !important;
    padding-bottom: clamp(96px, 13vh, 120px) !important;
    justify-content: flex-start !important;
  }
  /* El eslogan corto es el héroe: una sola declaración grande, mucho aire y el
     lima reservado a DOS puntos (la palabra FUTURO y el botón). El resto de
     acentos pasa a línea neutra para que la pantalla respire. */
  #inicio .hero-title {
    font-size: clamp(42px, 16vw, 72px) !important; line-height: 0.9 !important;
    letter-spacing: 0 !important; max-width: none;
  }
  #inicio .hero-eyebrow { font-size: 10px !important; letter-spacing: 0.2em; margin-bottom: clamp(22px, 3.6vh, 32px) !important; }
  #inicio .hero-note {
    font-size: 14.5px !important; line-height: 1.6 !important;
    margin-top: clamp(26px, 4.2vh, 36px) !important;
    border-left: 0 !important; padding-left: 0 !important;
  }
  /* CTAs apilados; Contáctanos primero y prominente */
  #inicio .hero-cta { flex-direction: column; align-items: stretch; gap: 14px !important; margin-top: clamp(36px, 6vh, 52px) !important; }
  .hero-contact-mob {
    display: flex !important; align-items: center; justify-content: center; gap: 12px;
    width: 100%; min-height: 54px; padding: 0 20px;
    border-radius: 7px; border: 1px solid var(--accent);
    background: var(--accent); color: #0A0A0A; text-decoration: none;
    font-family: var(--font-mono); font-size: 13px; font-weight: 700;
    letter-spacing: 0.14em; text-transform: uppercase;
    transition: filter .3s var(--ease);
  }
  .hero-contact-mob i { font-style: normal; font-size: 18px; }
  .hero-contact-mob:active { filter: brightness(0.92); }
  /* El botón "Iniciar proyecto" es redundante con Contáctanos → se oculta */
  #inicio .hero-cta .btn-circ { display: none !important; }
  /* "Ver proyectos" NO compite con Contáctenos: enlace de texto, no segundo
     botón. Un solo bloque lima en el hero. */
  #inicio .hero-cta .lnk:not(.hero-contact-mob) {
    min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
    width: 100%; padding: 0 !important;
    border: 0 !important; background: transparent !important;
    color: var(--ink-mute) !important; border-radius: 0 !important;
  }
  #inicio .hero-cta .lnk:not(.hero-contact-mob)::after { content: '\2192'; margin-left: 0; font-size: 18px; color: var(--accent); }
  #inicio .hero-cta .lnk:not(.hero-contact-mob):active { color: var(--ink) !important; }
  #inicio .hero-stats {
    display: grid !important; grid-template-columns: 1fr 1fr; gap: 14px 18px !important;
    margin-top: clamp(36px, 6vh, 52px) !important; padding-top: 24px; border-top: 1px solid var(--line);
  }
  /* Cifras en tono menor: informan sin competir con el eslogan */
  #inicio .hstat { border-left: none !important; padding-left: 0 !important; gap: 3px; }
  #inicio .hstat b { font-size: 22px !important; color: var(--ink); }
  #inicio .hstat span { font-size: 9.5px !important; letter-spacing: 0.08em; color: var(--ink-faint); }

  /* ============ NOSOTROS ============ */
  #nosotros .about-body { display: block !important; }
  #nosotros .nos-c__lead { font-size: 15px !important; line-height: 1.6 !important; }
  #nosotros .nos-c__meta {
    flex-direction: column !important; align-items: stretch !important;
    gap: 24px !important; margin-top: clamp(30px, 5vh, 42px) !important;
    padding-top: clamp(24px, 4vh, 32px) !important;
    border-top: 1px solid var(--line);
  }
  #nosotros .nos-c__since b { font-size: 38px !important; }
  #nosotros .nos-c__lbl { margin-bottom: 10px !important; }
  #nosotros .nos-c__sectors {
    border-left: 0 !important; border-top: 1px solid var(--line) !important;
    padding-left: 0 !important; padding-top: 22px !important; min-width: 0 !important;
  }
  #nosotros .nos-c__chips .tag { font-size: 11px !important; padding: 9px 14px !important; }
  /* Mapa de México: visible y a buen tamaño, asociado a la cobertura */
  #nosotros .nos-c__map {
    display: flex !important; flex-direction: column; align-items: center;
    margin: clamp(30px, 5vh, 44px) 0 0 !important; padding: 0 !important;
    gap: 12px;
  }
  #nosotros .nos-c__map .nos-c__mapwrap { width: min(82%, 320px) !important; }
  #nosotros .nos-c__flow {
    margin-top: clamp(34px, 6vh, 52px) !important;
    padding-top: clamp(28px, 4.6vh, 40px) !important;
    border-top: 1px solid var(--line-strong);
  }
  #nosotros .nos-c__step { padding: 22px 0 !important; }
  #nosotros .nos-c__step:first-child { padding-top: 0 !important; }
  #nosotros .nos-c__step h3 { font-size: 22px !important; margin: 12px 0 9px !important; }
  #nosotros .nos-c__step p { font-size: 15px !important; line-height: 1.66 !important; }
  #nosotros .nos-c__step b { font-size: 12px !important; }

  /* ============ FILOSOFÍA ============ */
  #filosofia .phil-a { display: block !important; margin-top: clamp(8px, 2vh, 18px) !important; }
  #filosofia .phil-a__manifesto { font-size: clamp(24px, 6.6vw, 31px) !important; line-height: 1.22 !important; }
  #filosofia .phil-a__pillars {
    grid-template-columns: 1fr !important; gap: 0 !important;
    margin-top: clamp(34px, 5.6vh, 48px) !important;
  }
  #filosofia .phil-a__pillar { padding: 22px 0 !important; border-top: 1px solid var(--line); }
  #filosofia .phil-a__pillar:first-child { border-top-color: var(--line-strong); }
  #filosofia .phil-a__num { margin-bottom: 12px !important; }
  #filosofia .phil-a__pillar h4 { font-size: 21px !important; margin: 9px 0 8px !important; }
  #filosofia .phil-a__pillar p { font-size: 15px !important; line-height: 1.66 !important; }
  #filosofia .phil-a__method {
    border-left: 0 !important; padding-left: 0 !important;
    margin-top: clamp(34px, 5.6vh, 48px) !important;
    padding-top: clamp(28px, 4.6vh, 40px) !important;
    border-top: 1px solid var(--line-strong);
  }
  #filosofia .phil-a__list { margin-top: clamp(22px, 3.4vh, 30px) !important; gap: clamp(20px, 3vh, 28px) !important; }
  #filosofia .phil-a__list li { grid-template-columns: 34px 1fr !important; gap: 16px !important; }
  #filosofia .phil-a__list h5 { font-size: 16px !important; }
  #filosofia .phil-a__list p { font-size: 15px !important; line-height: 1.6 !important; }

  /* ============ SERVICIOS — TARJETAS (móvil) ============ */
  /* El fondo único detrás sobra: cada tarjeta lleva su propia foto */
  #servicios .svc-bg { display: none !important; }
  #servicios .svc-panel { display: none !important; }
  #servicios .svc-grid { display: block !important; }
  .svc-rows {
    display: flex !important; flex-direction: column; gap: 16px;
    margin: 0; padding: 0; list-style: none;
  }
  .svc-rows li { border: 0 !important; margin: 0; }
  .svc-row {
    display: block !important; width: 100%; text-align: left;
    background: var(--surface); border: 1px solid var(--line) !important;
    border-radius: 6px; overflow: hidden; padding: 0 !important;
    min-height: 0 !important; flex-wrap: nowrap;
    transition: border-color .3s var(--ease);
  }
  .svc-row.on { border-color: var(--line-strong) !important; }
  .svc-row__img {
    display: block; width: 100%; height: 184px;
    background-size: cover; background-position: center;
    filter: grayscale(0.18) contrast(1.02);
  }
  .svc-row__num {
    display: inline-block; padding: 16px 18px 0 !important;
    font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em;
    color: var(--accent);
  }
  .svc-row__name {
    display: block !important; padding: 7px 18px 0;
    font-size: 22px !important; line-height: 1.12; color: var(--ink);
  }
  .svc-row__desc {
    display: block !important; width: auto;
    padding: 11px 18px 18px !important;
    font-size: 15px !important; line-height: 1.6 !important;
    color: var(--ink-mute) !important;
  }
  /* Botón "Cotizar este servicio" → en tarjetas no hay selección única;
     lo convierto en CTA general a ancho completo */
  .svc-lnk-flow {
    display: flex !important; width: 100%; justify-content: center;
    min-height: 54px; align-items: center; margin-top: 22px !important;
    border: 1px solid var(--accent); border-radius: 6px;
  }

  /* ============ PROYECTOS ============ */
  /* ============ PROYECTOS — TARJETAS premium (móvil) ============ */
  #proyectos .pj-bg { display: none !important; }   /* el fondo a sangre sobra: cada tarjeta trae su foto */
  /* CARRUSEL COVERFLOW — tarjeta central nítida; las vecinas se ven reducidas,
     difuminadas y giradas detrás. Se desliza para avanzar y es infinito. El
     posicionamiento real lo aplica el JS (experiencia.js) por tarjeta. */
  /* CARRUSEL horizontal con "peek" (como Servicios), de scroll nativo. El loop
     infinito lo gestiona el JS clonando el set y reposicionando el scroll. */
  #proyectos .pj-stage {
    display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important;
    align-items: stretch !important;
    overflow-x: auto; overflow-y: visible;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain; scroll-behavior: auto;
    gap: 14px !important;
    margin: clamp(10px, 2.4vh, 22px) -22px 0 !important;
    padding: 4px 22px 16px !important;
    scroll-padding-left: 22px;
    scrollbar-width: none; position: static; min-height: 0;
  }
  #proyectos .pj-stage::-webkit-scrollbar { display: none; }
  #proyectos .pj {
    display: flex !important; flex-direction: column; height: auto; align-self: stretch;
    flex: 0 0 82% !important; scroll-snap-align: start; margin: 0 !important;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: 6px; overflow: hidden; cursor: pointer;
  }
  /* Pista de deslizamiento, mismo estilo que la de Servicios */
  #proyectos .pj-hint {
    display: block; text-align: center; margin: 12px 0 2px;
    font-family: var(--font-mono); font-size: 9.5px; font-weight: 600;
    letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint);
  }
  /* Sin contorno amarillo ni resaltado al tocar/seleccionar la tarjeta */
  #proyectos .pj-stage, #proyectos .pj {
    -webkit-tap-highlight-color: transparent;
  }
  #proyectos .pj:focus, #proyectos .pj:focus-visible,
  #proyectos .pj-stage:focus, #proyectos .pj-stage:focus-visible {
    outline: none !important;
  }
  #proyectos .pj__media {
    position: relative; display: block; width: 100%;
    height: 140px; flex: 0 0 140px; margin: 0;
    background-size: cover; background-position: center;
    filter: grayscale(0.2) contrast(1.03);
  }
  /* Número grande en contorno amarillo sobre la foto (lenguaje del sitio) */
  #proyectos .pj__media-num {
    position: absolute; left: 14px; bottom: 6px;
    font-family: var(--font-display); font-weight: 400;
    font-size: 48px; line-height: 1; letter-spacing: 0.01em;
    color: transparent; -webkit-text-stroke: 1.4px rgba(230,254,44,0.9);
    text-shadow: 0 2px 18px rgba(0,0,0,0.55);
  }
  #proyectos .pj__media::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(12,13,13,0.55), transparent 45%);
  }
  #proyectos .pj__info { flex: 1 1 auto; display: flex; flex-direction: column; padding: 16px 18px 18px !important; position: static; min-height: 0; }
  #proyectos .pj__info .pj__num { display: none !important; }  /* el nº va en la foto */
  #proyectos .pj__loc {
    display: block; font-family: var(--font-mono); font-size: 11px;
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent);
    margin: 0 0 8px !important;
  }
  #proyectos .pj__name { font-size: 22px !important; line-height: 1.16; margin: 0 !important; }
  #proyectos .pj__desc {
    font-size: 15px !important; line-height: 1.6 !important; color: var(--ink-mute) !important;
    margin-top: 11px !important; max-width: none;
    display: block !important;
  }
  /* El índice tappable ya no hace falta: cada proyecto es su propia tarjeta */
  #proyectos .pj-index { display: none !important; }
  #proyectos .pj-foot { margin-top: 22px !important; }
  #proyectos .pj-foot__lnk { width: 100%; justify-content: center; min-height: 54px; }

  /* ============ PROYECTOS — base de animación premium ============ */
  #proyectos .pj__media { position: relative; overflow: hidden; }

  /* ============ CONTACTO ============ */
  #contacto .ct-info { grid-template-columns: 1fr !important; gap: 22px !important; margin-top: clamp(26px, 4.4vh, 36px) !important; }
  #contacto .cinfo__val { font-size: 15px !important; }
  #contacto .ct-form { margin-top: clamp(30px, 5vh, 42px) !important; }
  #contacto .ct-form__row { grid-template-columns: 1fr !important; gap: 0 !important; }
  #contacto .ct-form__row + .ct-form__row { margin-top: 0 !important; }
  #contacto .ct-form input, #contacto .ct-form select, #contacto .ct-form textarea { font-size: 16px !important; padding: 14px 0 !important; }
  #contacto .ct-actions { flex-direction: column !important; align-items: stretch !important; gap: 16px !important; margin-top: 22px !important; }
  #contacto .ct-actions .btn, #contacto .ct-actions a, #contacto .ct-actions button { width: 100%; justify-content: center; min-height: 54px; }
  #contacto .ct-foot { margin-top: clamp(26px, 4.4vh, 36px) !important; gap: 12px 24px !important; }
}

/* =====================================================================
   PROYECTOS — REVELADO CINEMATOGRÁFICO (solo con JS y sin reduce-motion)
   Se usa ANIMACIÓN por keyframes (gana siempre a la cascada) disparada por
   .revealed en cada tarjeta. Fail-safe: sin has-js o con reduce-motion,
   nada se oculta.
   ===================================================================== */
@media (max-width: 920px) and (prefers-reduced-motion: no-preference) {
  /* Panel que cubre la foto y se retrae al revelar (wipe desde abajo) */
  html.has-js #proyectos .pj__media::after { z-index: 3; }   /* scrim sobre foto */
  html.has-js #proyectos .pj .pj__wipe {
    position: absolute; inset: 0; z-index: 4; background: var(--bg);
    transform-origin: bottom; transform: scaleY(1);
  }
  html.has-js #proyectos .pj.revealed .pj__wipe {
    animation: pjWipe .82s cubic-bezier(.76,0,.24,1) forwards;
    animation-delay: var(--d, 0s);
  }
  @keyframes pjWipe { to { transform: scaleY(0); } }

  /* Ken-Burns: la foto entra con un leve zoom-out al revelar */
  html.has-js #proyectos .pj.revealed .pj__media {
    animation: pjZoom 1.2s cubic-bezier(.22,1,.36,1) forwards;
    animation-delay: var(--d, 0s);
  }
  @keyframes pjZoom { from { background-size: 116%; } to { background-size: 100%; } }

  /* Número grande: sube y aparece tras el wipe */
  html.has-js #proyectos .pj__media-num { opacity: 0; }
  html.has-js #proyectos .pj.revealed .pj__media-num {
    animation: pjNum .6s var(--ease) forwards;
    animation-delay: calc(var(--d, 0s) + .34s);
  }
  @keyframes pjNum { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

  /* Texto de la tarjeta en cascada (esto ya funciona por data-r, lo reforzamos) */
  html.has-js #proyectos .pj__info > * { opacity: 0; }
  html.has-js #proyectos .pj.revealed .pj__info > * {
    animation: pjText .6s var(--ease) forwards;
  }
  html.has-js #proyectos .pj.revealed .pj__info > *:nth-child(2) { animation-delay: calc(var(--d,0s) + .40s); }
  html.has-js #proyectos .pj.revealed .pj__info > *:nth-child(3) { animation-delay: calc(var(--d,0s) + .47s); }
  html.has-js #proyectos .pj.revealed .pj__info > *:nth-child(4) { animation-delay: calc(var(--d,0s) + .54s); }
  @keyframes pjText { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
}


/* =====================================================================
   MEJORAS UX — anclas suaves · menú con sección activa · selección + cotizar
   ===================================================================== */
/* Hamburguesa: indica la sección actual y mejora el contraste al abrir */
.navtoggle:hover, .navtoggle[aria-expanded="true"] { border-color: var(--accent); }

/* Enlace activo dentro del menú: el título de la sección actual va en lima, el resto en blanco */
.menu__links a { position: relative; transition: color .3s var(--ease); }
.menu__links a.on span { color: var(--accent); }

/* Resalte del campo del formulario al cotizar desde una tarjeta */
.field-flash { animation: fieldFlash 1.85s var(--ease); border-radius: 5px; }
@keyframes fieldFlash {
  0%   { box-shadow: 0 0 0 0 var(--accent-dim); background: rgba(230,254,44,0.12); }
  12%  { box-shadow: 0 0 0 5px var(--accent-dim); }
  100% { box-shadow: 0 0 0 0 rgba(0,0,0,0); background: transparent; }
}

@media (max-width: 920px) {
  /* Suaviza cualquier salto entre secciones (refuerza el scroll suave por JS) */
  html { scroll-behavior: smooth; }

  /* Tarjeta de servicio/proyecto SELECCIONADA: se ilumina con el amarillo de marca */
  .svc-row, #proyectos .pj { position: relative; }
  .svc-row.is-sel,
  #proyectos .pj.is-sel {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 1px var(--accent), 0 12px 32px -16px rgba(0,0,0,0.75);
  }
  .svc-row.is-sel::after,
  #proyectos .pj.is-sel::after {
    content: 'Seleccionado';
    position: absolute; top: 10px; right: 10px; z-index: 5;
    font-family: var(--font-mono); font-size: 9.5px; font-weight: 700;
    letter-spacing: 0.16em; text-transform: uppercase; color: #0A0A0A;
    background: var(--accent); padding: 6px 10px; border-radius: 4px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.45);
  }

  /* CTA de cotización en estado "listo" cuando hay una tarjeta elegida */
  .svc-lnk-flow.has-sel {
    background: var(--accent) !important; color: #0A0A0A !important;
    border-color: var(--accent) !important; font-weight: 700;
  }
  .svc-lnk-flow.has-sel::after { color: #0A0A0A; }
}

@media (max-width: 920px) {
  /* === BOTÓN POR TARJETA: cada servicio / proyecto lleva su propio "Cotizar" === */
  .svc-rows li { display: flex; flex-direction: column; gap: 10px; }
  .card-quote {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; min-height: 52px;
    background: var(--accent); color: #0A0A0A;
    font-family: var(--font-mono); font-size: 12px; font-weight: 700;
    letter-spacing: 0.13em; text-transform: uppercase; text-decoration: none;
    border-radius: 6px; transition: filter .25s var(--ease);
  }
  #proyectos .card-quote { margin-top: 16px; }
  .card-quote i { font-style: normal; font-size: 16px; line-height: 1; }
  .card-quote:active { filter: brightness(0.9); }

  /* Con botón por tarjeta, los CTA genéricos de sección sobran en móvil */
  #servicios .svc-lnk-flow, #servicios .sec-cta-top,
  #proyectos .pj-foot, #proyectos .sec-cta-top { display: none !important; }
}

@media (max-width: 920px) {
  /* El botón de cada tarjeta aparece SOLO cuando la tarjeta está seleccionada */
  .svc-row + .card-quote { display: none; }
  .svc-row.is-sel + .card-quote { display: flex; }
  #proyectos .pj .card-quote { display: none; }
  #proyectos .pj.is-sel .card-quote { display: flex; }
  /* El botón que aparece ya indica la selección → fuera el sello redundante */
  .svc-row.is-sel::after, #proyectos .pj.is-sel::after { content: none; }
}


/* El botón de cotización por tarjeta queda oculto por defecto; solo se muestra
   en móvil cuando la tarjeta está seleccionada (reglas .is-sel, más específicas). */
.card-quote { display: none; }

/* Barra superior real (estilo Apple): elemento propio promovido a su capa de
   composición para que NO parpadee ni se despegue durante el scroll por inercia
   en iOS / navegador in-app de WhatsApp. Oculta en escritorio. */
.chrome__bar { display: none; }
@media (max-width: 920px) {
  /* Anula la barra pseudo (poco fiable como ::before fijo en algunos webviews) */
  body::before, body::after { display: none !important; }
  .chrome__bar {
    display: block; position: fixed; top: 0; left: 0; right: 0;
    height: calc(56px + env(safe-area-inset-top, 0px));
    background: #0A0A0A; border-bottom: 1px solid var(--line);
    z-index: 86; pointer-events: none;
    transform: translateZ(0); -webkit-transform: translateZ(0);
    -webkit-backface-visibility: hidden; backface-visibility: hidden;
    will-change: transform;
  }
  /* La barra superior permanece SÓLIDA y por encima del menú: el header se ve
     idéntico abierto o cerrado, y el menú se despliega por debajo de ella. */
  /* El logo y la hamburguesa también a su propia capa: evita el lag de iOS */
  .chrome__logo, .navtoggle { transform: translateZ(0); -webkit-transform: translateZ(0); }
}

/* Centrado vertical de la hamburguesa respecto al logo dentro de la barra.
   La barra mide 56px (+notch); logo (26px) en top 15 → centro en 28.
   Toggle (48px) → top 4 para centrar también en 28. */
@media (max-width: 920px) {
  .chrome__logo { top: calc(env(safe-area-inset-top, 0px) + 15px); }
  .navtoggle { top: calc(env(safe-area-inset-top, 0px) + 4px); }
}

/* === MENÚ MÓVIL COMPACTO: todo en una sola pantalla, mismo estilo === */
@media (max-width: 920px) {
  .menu__inner {
    padding: calc(env(safe-area-inset-top, 0px) + 72px) clamp(24px, 7vw, 46px)
             calc(env(safe-area-inset-bottom, 0px) + 16px);
    gap: clamp(7px, 1.1vh, 13px);
    justify-content: flex-start;
  }
  .menu__eyebrow { margin-bottom: 0; }
  .menu__links a { padding: clamp(11px, 2vh, 19px) 12px clamp(11px, 2vh, 19px) 4px; gap: 16px; }
  .menu__links span { font-size: clamp(27px, 7.2vw, 38px); }
  .menu__links b { font-size: 11px; }
  /* Pie compacto: etiqueta + dato más juntos y algo menores */
  .menu__foot { margin-top: clamp(14px, 2.4vh, 26px); gap: 9px; }
  .menu__row { gap: 2px; }
  .menu__row span { font-size: 8.5px; }
  .menu__row b { font-size: 13px; }
}

/* =====================================================================
   NOSOTROS · FILOSOFÍA MÓVIL — texto comprimido para caber en pantalla
   ===================================================================== */
@media (max-width: 920px) {

  /* --- NOSOTROS --- */
  /* Intro y descripciones VISIBLES: dan el contexto narrativo de la sección
     (quiénes somos + por qué están las tres disciplinas). */
  #nosotros .nos-c__lead { display: block; }
  #nosotros .nos-c__step p { display: block; }
  /* Chips de sectores en una sola fila compacta */
  #nosotros .nos-c__chips { gap: 4px; }
  #nosotros .nos-c__meta { margin-top: 8px; gap: 14px; }

  /* --- FILOSOFÍA --- */
  /* Ajusta el manifesto: algo más pequeño */
  #filosofia .phil-a__manifesto { font-size: clamp(18px, 5.2vw, 26px) !important; }
}

/* =====================================================================
   CONTACTO MÓVIL — formulario simplificado en una sola pantalla
   ===================================================================== */
@media (max-width: 920px) {
  /* Ocultar dirección — queda solo teléfono y email */
  #contacto .cinfo:first-child { display: none; }

  /* Info compacta: en fila horizontal */
  #contacto .ct-info {
    display: flex; flex-direction: row; gap: 20px;
    flex-wrap: wrap; margin-bottom: 12px;
  }
  #contacto .cinfo { gap: 2px; }
  #contacto .cinfo__lbl { font-size: 8px; }
  #contacto .cinfo__val { font-size: 13px; }

  /* Formulario: ocultar campo email y select de servicio */
  #contacto #c-email,
  #contacto label[for="c-email"],
  #contacto .sel { display: none; }

  /* Filas del form: una columna, menos espacio */
  #contacto .ct-form__row { grid-template-columns: 1fr; gap: 8px; }
  #contacto .ct-form { gap: 8px; }
  #contacto .ct-form__lbl { margin-bottom: 0; font-size: 9px; }

  /* Textarea mínima */
  #contacto textarea { rows: 1; min-height: 44px; resize: none; }
  #contacto #c-mensaje { min-height: 44px; }

  /* Botón y footer compactos */
  #contacto .ct-actions { flex-direction: row; align-items: center; gap: 16px; }
  #contacto .ct-foot { display: none; }
}

/* =====================================================================
   BOTONES HOMOGÉNEOS EN MÓVIL — btn-circ = primario (lima sólido),
   .lnk standalone = secundario (outlined), mismo lenguaje que hero-contact-mob
   ===================================================================== */
@media (max-width: 920px) {

  /* --- PRIMARIO: btn-circ → lima sólido, full-width --- */
  .btn-circ {
    display: flex !important; align-items: center; justify-content: space-between;
    width: 100%; min-height: 56px; padding: 0 20px;
    border-radius: 7px; border: 1px solid var(--accent);
    background: var(--accent); color: #0A0A0A; text-decoration: none;
    font-family: var(--font-mono); font-size: 13px; font-weight: 700;
    letter-spacing: 0.14em; text-transform: uppercase;
    transition: filter .3s var(--ease); cursor: pointer; box-sizing: border-box;
  }
  .btn-circ:hover { color: #0A0A0A; filter: brightness(0.94); }
  .btn-circ::after { display: none; }          /* quita el subrayado tipográfico */
  .btn-circ .dot { display: none; }            /* el punto ya no aplica */
  .btn-circ .circ {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 50%;
    background: rgba(0,0,0,0.18); border: none; color: #0A0A0A;
    font-size: 16px; flex: none;
  }
  .btn-circ .circ > i { font-style: normal; transition: transform .3s var(--ease); }
  .btn-circ:hover .circ > i { transform: translateX(3px); }

  /* Hero: ya tiene hero-contact-mob como primario → ocultamos el btn-circ duplicado */
  #inicio .hero-cta .btn-circ { display: none !important; }

  /* --- SECUNDARIO: .lnk standalone → outlined lima --- */
  .lnk:not(.hero-contact-mob):not(.rail__item):not(.nav__link) {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; min-height: 48px; padding: 0 18px;
    border-radius: 7px; border: 1px solid var(--accent);
    background: transparent; color: var(--accent);
    font-family: var(--font-mono); font-size: 11px; font-weight: 700;
    letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none;
    transition: background .3s var(--ease), color .3s var(--ease); box-sizing: border-box;
  }
  .lnk:not(.hero-contact-mob):not(.rail__item):not(.nav__link):hover {
    background: var(--accent); color: #0A0A0A;
  }
}

/* =====================================================================
   AJUSTES FINOS MÓVIL (cascada final) — selección uniforme, Nosotros
   integrado, Filosofía con texto al lado del título
   ===================================================================== */
@media (max-width: 920px) {

  /* ---------- 1 · SELECCIÓN DE SERVICIO = IGUAL QUE PROYECTO ----------
     El borde lima envuelve la tarjeta Y su botón (antes el botón quedaba
     fuera del borde). Se logra moviendo el realce al <li> contenedor. */
  .svc-rows li:has(.svc-row.is-sel) {
    border: 1px solid var(--accent) !important;
    box-shadow: 0 0 0 1px var(--accent), 0 12px 32px -16px rgba(0,0,0,0.75);
    border-radius: 12px; padding: 7px; gap: 7px;
  }
  .svc-rows li:has(.svc-row.is-sel) .svc-row.is-sel {
    border-color: transparent !important; box-shadow: none !important;
  }
  .svc-rows li:has(.svc-row.is-sel) .svc-row__img { border-radius: 8px; }

  /* ---------- 2 · NOSOTROS: datos integrados (sin recuadro) ----------
     "2009" y "Sectores" fluyen con divisorias finas, mismo lenguaje que las
     disciplinas de abajo — sin tarjeta con borde que se sienta pegada. */
  #nosotros .about-body { justify-content: flex-start !important; gap: 22px !important; }

  #nosotros .nos-c__meta {
    flex-direction: column !important; align-items: stretch !important;
    gap: 16px !important; margin-top: 0 !important;
    padding: clamp(18px, 3vh, 24px) 0 0 !important;
    border: 0 !important; border-top: 1px solid var(--line) !important;
    background: transparent !important; border-radius: 0 !important; overflow: visible !important;
  }
  /* Trayectoria: 2009 y +15 como STATS nativas (barra lima + número + etiqueta),
     mismo lenguaje que los stats del hero. */
  #nosotros .nos-c__stats { display: flex !important; gap: 30px; }
  #nosotros .nos-c__stat {
    flex: 0 0 auto; display: flex; flex-direction: column; gap: 6px;
    border-left: 2px solid var(--accent); padding-left: 13px;
  }
  #nosotros .nos-c__stat b {
    display: block; font-family: var(--font-display) !important; font-weight: 400 !important;
    font-size: 28px !important; line-height: 1 !important; color: var(--ink) !important;
    letter-spacing: 0.01em !important;
  }
  #nosotros .nos-c__stat .nos-c__lbl { margin: 0 !important; font-size: 11px !important; line-height: 1.35; }
  #nosotros .nos-c__sectors {
    padding: 0 !important; border: 0 !important; min-width: 0 !important;
  }
  #nosotros .nos-c__lbl { font-size: 11px !important; }
  #nosotros .nos-c__chips { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px !important; }
  #nosotros .nos-c__chips .tag { font-size: 11px !important; padding: 9px 10px !important; text-align: center; letter-spacing: 0.08em; }

  /* Mapa: misma separación superior que el bloque "Cómo trabajamos",
     para que "Dónde operamos" no quede pegado a los chips de arriba */
  #nosotros .nos-c__map { margin-top: clamp(34px, 5.5vh, 48px) !important; align-items: stretch !important; }
  /* "Dónde operamos" alineado a la izquierda, igual que "Cómo trabajamos" */
  #nosotros .nos-c__map .nos-c__chapter { align-self: flex-start; }
  #nosotros .nos-c__map .nos-c__mapwrap { width: min(80%, 260px) !important; align-self: center; }
  #nosotros .nos-c__map .nos-c__cap { align-self: center; }
  /* Nota del signo: misma familia de "aside" que la nota del hero (regla lima a
     la izquierda), medida corta y cuerpo legible para que no lea a letra chica. */
  .nos-c__signo {
    margin-top: clamp(18px, 3vh, 26px) !important;
    max-width: none;   /* ocupa todo el ancho: sin columna vacía a la derecha */
  }
  .nos-c__signo span { font-size: 12.5px !important; line-height: 1.62 !important; }
  /* Safari aplica 'text-wrap: pretty' como optimizador de párrafo completo y
     acorta TODAS las líneas para igualar el rag — de ahí la columna vacía a la
     derecha. Aquí queremos que el texto llene la medida. */
  .nos-c__signo, .nos-c__signo span { text-wrap: wrap !important; }

  /* Disciplinas: número + título arriba, descripción debajo a ancho completo
     (texto a 15px, igual que el resto de la sección y del sitio) */
  #nosotros .nos-c__flow { padding-top: 4px !important; }
  #nosotros .nos-c__step {
    display: block !important; padding: 16px 0 !important;
    border-top: 1px solid var(--line); text-align: left;
  }
  #nosotros .nos-c__step:first-child { border-top: 0; padding-top: 6px !important; }
  #nosotros .nos-c__step b {
    display: block; margin: 0 0 6px !important; font-size: 12px !important;
  }
  #nosotros .nos-c__step h3 {
    font-size: 18px !important; margin: 0 0 8px !important;
  }
  #nosotros .nos-c__step p {
    display: block !important; margin: 0 !important;
    font-size: 15px !important; line-height: 1.6 !important; color: var(--ink-mute);
  }

  /* ---------- 3 · FILOSOFÍA: descripción al lado del título ----------
     Cada pilar es una fila: izquierda número + título; derecha el texto.
     El bloque Método sigue oculto para no alargar la sección. */
  #filosofia .phil-a {
    display: flex !important; flex-direction: column;
    flex: 1 1 auto !important; min-height: 0;
    justify-content: flex-start !important;
  }
  #filosofia .phil-a__method { display: none; }
  #filosofia .phil-a__pillars {
    display: flex !important; flex-direction: column; gap: 0 !important;
    flex: 1 1 auto; min-height: 0;
    margin-top: clamp(22px, 4vh, 34px) !important;
  }
  #filosofia .phil-a__pillar {
    display: grid !important; grid-template-columns: 118px 1fr; gap: 4px 18px;
    align-items: start; align-content: center; flex: 1 1 0;
    padding: 16px 0 !important;
    border-top: 1px solid var(--line) !important; text-align: left;
  }
  #filosofia .phil-a__pillar:first-child { border-top: 0 !important; }
  #filosofia .phil-a__num {
    grid-column: 1; grid-row: 1; display: block;
    margin: 0 0 4px !important; text-align: left;
  }
  #filosofia .phil-a__pillar h4 {
    grid-column: 1; grid-row: 2; font-size: 17px !important;
    margin: 0 !important; text-align: left; align-self: start;
  }
  #filosofia .phil-a__pillar p {
    grid-column: 2; grid-row: 1 / 3; align-self: center;
    display: block !important; font-size: 12.5px !important; line-height: 1.5 !important;
    color: var(--ink-mute); margin: 0; text-align: left;
  }

  /* ---------- 4 · PROYECTOS SELECCIONADO = IGUAL QUE SERVICIOS ----------
     Offset (padding) dentro del borde lima; el contenido (foto+info) es una
     tarjeta interior y el botón queda separado por un gap, igual que servicios. */
  #proyectos .pj.is-sel {
    padding: 7px !important; background: transparent !important;
    border-radius: 12px !important; overflow: visible !important;
    display: block !important;
  }
  #proyectos .pj.is-sel .pj__media { border-radius: 8px 8px 0 0; }
  #proyectos .pj.is-sel .pj__info {
    background: var(--surface); border-radius: 0 0 8px 8px;
  }
  #proyectos .pj.is-sel .card-quote { margin-top: 7px !important; }

  /* Aparición suave del botón Cotizar al seleccionar (en vez de saltar) */
  .svc-row.is-sel + .card-quote,
  #proyectos .pj.is-sel .card-quote {
    animation: cardQuoteIn .42s var(--ease) both;
  }
  @keyframes cardQuoteIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
  }
}

/* =====================================================================
   VIDA MÓVIL — movimiento sutil, premium y de bajo costo (solo transform/
   opacity). Micro-stagger en filas, respuesta táctil y un pulso lento en
   el botón flotante. Respeta reduce-motion.
   ===================================================================== */
@media (max-width: 920px) and (prefers-reduced-motion: no-preference) {

  /* --- 1 · Micro-stagger: las filas entran en secuencia dentro de su bloque --- */
  html.has-js #filosofia .phil-a .phil-a__pillar,
  html.has-js #nosotros .nos-c__flow .nos-c__step { opacity: 0; transform: translateY(12px); }
  html.has-js #filosofia .phil-a.revealed .phil-a__pillar,
  html.has-js #nosotros .nos-c__work.revealed .nos-c__step {
    animation: rowIn .58s var(--ease) both;
  }
  html.has-js #filosofia .phil-a.revealed .phil-a__pillar:nth-child(1),
  html.has-js #nosotros .nos-c__work.revealed .nos-c__step:nth-child(1) { animation-delay: .05s; }
  html.has-js #filosofia .phil-a.revealed .phil-a__pillar:nth-child(2),
  html.has-js #nosotros .nos-c__work.revealed .nos-c__step:nth-child(2) { animation-delay: .13s; }
  html.has-js #filosofia .phil-a.revealed .phil-a__pillar:nth-child(3),
  html.has-js #nosotros .nos-c__work.revealed .nos-c__step:nth-child(3) { animation-delay: .21s; }
  @keyframes rowIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

  /* --- 2 · Respuesta táctil: lo que se toca responde al instante --- */
  .btn-circ, .lnk, .card-quote, .hero-contact-mob,
  #servicios .svc-row, #proyectos .pj, .chrome__social a, .menu__links a {
    transition: transform .22s var(--ease), filter .22s var(--ease),
                border-color .3s var(--ease), background .3s var(--ease), color .3s var(--ease);
  }
  .btn-circ:active, .lnk:active, .card-quote:active, .hero-contact-mob:active,
  .menu__links a:active {
    transform: scale(0.975);
  }
  .chrome__social a:active { transform: scale(0.9); }

  /* --- 3 · Pulso lento del botón flotante de WhatsApp (anillo que late) --- */
  .chrome__social a { position: relative; }
  .chrome__social a::after {
    content: ''; position: absolute; inset: 0; border-radius: 50%;
    border: 1.5px solid var(--accent); opacity: 0; pointer-events: none;
    animation: faPulse 3.4s var(--ease) infinite;
  }
  @keyframes faPulse {
    0%   { transform: scale(1); opacity: 0.5; }
    70%  { transform: scale(1.55); opacity: 0; }
    100% { transform: scale(1.55); opacity: 0; }
  }

  /* El cursor de bloque del efecto "decode" de títulos no aplica bien en móvil
     (deja un rectángulo lima al final del texto). Se oculta; el título entra
     con su animación de reveal, limpio. */
  .thead h2.decoding::after { display: none !important; }
}

/* =====================================================================
   CALIBRACIÓN VISUAL FINAL (móvil) — misma paleta (lima único acento) y
   mismas tipografías (Anton display · JetBrains Mono). Mejora legibilidad,
   jerarquía del acento, columnas responsivas, radios y ritmo.
   ===================================================================== */
@media (max-width: 920px) {

  /* --- 1 · Legibilidad de párrafos en monoespaciada (sin cambiar la fuente):
     más interlineado, tracking ligeramente más cerrado y medida controlada --- */
  #nosotros .nos-c__step p, #filosofia .phil-a__pillar p,
  #proyectos .pj__desc, #servicios .svc-row__desc, .nos-c__lead, .hero-note {
    line-height: 1.62 !important; letter-spacing: -0.005em;
  }
  #proyectos .pj__desc, #servicios .svc-row__desc { max-width: 42ch; }

  /* --- 2 · Lima = solo acción + estado. Los números decorativos pasan a gris
     (siguen legibles, pero dejan que el lima signifique "accionable") --- */
  #filosofia .phil-a__num,
  #nosotros .nos-c__step b,
  .menu__links a:not(.on) b { color: var(--ink-faint) !important; }

  /* --- 3 · Columnas responsivas: la columna de número+título respira en
     pantallas chicas en vez de un fijo de 118px --- */
  #filosofia .phil-a__pillar,
  #nosotros .nos-c__step {
    grid-template-columns: clamp(80px, 26vw, 118px) 1fr !important;
  }

  /* --- 5 · Jerarquía de eyebrows: un punto más de contraste, menos tracking --- */
  .eyebrow { color: var(--ink-mute) !important; letter-spacing: 0.16em !important; }

  /* --- 6 · Radios consistentes: botones alineados al radio de las tarjetas --- */
  .btn-circ, .lnk:not(.hero-contact-mob):not(.rail__item):not(.nav__link),
  .card-quote, .hero-contact-mob { border-radius: 8px !important; }
  #nosotros .nos-c__chips .tag { border-radius: 6px; }

  /* --- 7 · Pulso del WhatsApp finito: late unas veces al cargar y se detiene
     (vida inicial sin distraer permanentemente durante el scroll) --- */
  .chrome__social a::after { animation-iteration-count: 4 !important; }

  /* --- 8 · SERVICIOS como CARRUSEL horizontal (scroll-snap nativo) ---
     Antes eran 9 tarjetas apiladas = sección larguísima. Ahora se deslizan
     en horizontal, con "peek" de la siguiente para invitar a desplazar. */
  #servicios .svc-rows {
    flex-direction: row !important; flex-wrap: nowrap !important;
    overflow-x: auto; overflow-y: visible;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain; scroll-behavior: auto;
    gap: 14px !important;
    margin: 0 -22px !important;
    padding: 4px 22px 16px !important;
    scroll-padding-left: 22px;
    scrollbar-width: none;
  }
  #servicios .svc-rows::-webkit-scrollbar { display: none; }
  #servicios .svc-rows > li {
    flex: 0 0 82% !important; scroll-snap-align: start;
    align-self: stretch; margin: 0 !important;
  }
  /* Todas las tarjetas igualan a la más alta; con textos de longitud pareja
     casi no queda hueco. La FOTO mantiene SIEMPRE el mismo tamaño. */
  #servicios .svc-rows > li .svc-row {
    flex: 1 1 auto; display: flex !important; flex-direction: column;
    gap: 0 !important;   /* el aire lo dan los paddings; el gap dejaba 44px muertos */
  }
  #servicios .svc-rows > li .svc-row .svc-row__img {
    flex: 0 0 140px; height: 140px;
  }
  /* NUMERACIÓN estilo Proyectos: número grande en contorno amarillo sobre la
     foto — mismo lenguaje que las tarjetas de Proyectos. */
  #servicios .svc-rows .svc-row__img { position: relative; }
  #servicios .svc-rows .svc-row__img::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to top, rgba(12,13,13,0.6), transparent 46%);
  }
  #servicios .svc-rows .svc-row__num {
    position: absolute; left: 14px; top: 84px; z-index: 2;
    display: block !important; padding: 0 !important; margin: 0 !important;
    font-family: var(--font-display) !important; font-weight: 400 !important;
    font-size: 48px !important; line-height: 1 !important; letter-spacing: 0.01em !important;
    color: transparent !important; -webkit-text-stroke: 1.4px rgba(230,254,44,0.9);
    text-shadow: 0 2px 18px rgba(0,0,0,0.55);
  }
  /* ALTURA PAREJA Y AJUSTADA: el título reserva 2 líneas y el texto 4, así que
     todas las tarjetas miden lo mismo (~315px) sin el hueco muerto que dejaba
     el estirado a la más alta. El recorte a 5 líneas es solo red de seguridad. */
  #servicios .svc-rows .svc-row__name {
    padding-top: 14px !important; box-sizing: border-box;
    min-height: 63px; margin: 0 !important;
  }
  #servicios .svc-rows .svc-row__desc {
    padding: 10px 18px 16px !important; box-sizing: border-box;
    line-height: 1.5 !important; min-height: 116px; margin: 0 !important;
    display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden;
  }
  /* Pista de deslizamiento bajo el carrusel */
  #servicios .svc-grid::after {
    content: 'Desliza para ver los 8 servicios →';
    display: block; margin-top: 4px;
    font-family: var(--font-mono); font-size: 9.5px; font-weight: 600;
    letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint);
  }
}

/* =====================================================================
   CONTACTO (móvil) — TODO EN UNA SOLA PANTALLA, sin scrollear.
   Bloque final = máxima prioridad. Aire ajustado, datos en fila,
   acción de WhatsApp como botón y "por correo" como enlace fino. */
@media (max-width: 920px) {
  #contacto .sw {
    justify-content: flex-start !important;
    gap: 0 !important;
    padding-top: clamp(60px, 8.5vh, 80px) !important;
    padding-bottom: clamp(72px, 9.5vh, 92px) !important;
  }
  /* Hueco bajo el título recortado */
  #contacto .thead { margin-bottom: clamp(12px, 2.2vh, 18px) !important; }
  #contacto .thead h2 { font-size: clamp(38px, 11vw, 50px) !important; }
  /* Teléfono + email en una fila compacta, pegados al título */
  #contacto .ct-info {
    display: flex !important; flex-direction: row !important; flex-wrap: wrap;
    gap: 8px 28px !important; margin: clamp(8px, 1.8vh, 14px) 0 0 !important;
  }
  #contacto .cinfo__lbl { margin-bottom: 4px !important; }
  /* Formulario: aire reducido y parejo */
  #contacto .ct-form { margin-top: clamp(16px, 2.6vh, 22px) !important; }
  #contacto .ct-form__lbl { margin-bottom: clamp(10px, 1.8vh, 14px) !important; }
  #contacto .ct-form__row + .ct-form__row { margin-top: clamp(12px, 2vh, 16px) !important; }
  #contacto .ct-form input, #contacto .ct-form textarea { padding: 9px 0 !important; }
  #contacto .ct-form textarea { line-height: 1.5 !important; }
  /* Acciones: WhatsApp = botón lima full-width; correo = enlace fino debajo */
  #contacto .ct-actions {
    flex-direction: column !important; align-items: stretch !important;
    gap: 8px !important; margin-top: clamp(14px, 2.4vh, 20px) !important;
  }
  #contacto .ct-actions .btn-circ { width: 100%; min-height: 52px; }
  #contacto .ct-actions button.lnk {
    width: 100%; min-height: 0 !important; padding: 4px 0 !important;
    border: 0 !important; background: transparent !important;
    justify-content: center; color: var(--ink-mute) !important;
    text-decoration: underline; text-underline-offset: 3px;
  }
  /* La flecha vive en CSS (antes estaba escrita en el markup y se duplicaba
     con la regla de escritorio) */
  #contacto .ct-actions button.lnk::after {
    content: '\2192'; margin-left: 8px; font-size: 16px; color: var(--accent);
  }
  #contacto .ct-actions button.lnk:hover { background: transparent !important; color: var(--accent) !important; }
}

/* =====================================================================
   SALTOS HOMOGÉNEOS ENTRE SECCIONES (móvil) — bloque final, máxima
   prioridad. Mismo padding superior e inferior en TODAS las secciones de
   contenido, así el título arranca a la misma altura y el salto entre
   secciones es idéntico (antes variaba: servicios/proyectos ~64-96px,
   nosotros/filosofía ~42-58px, contacto otro valor). */
@media (max-width: 920px) {
  #servicios .sw, #proyectos .sw, #nosotros .sw, #filosofia .sw, #contacto .sw {
    padding-top: clamp(56px, 8svh, 76px) !important;
    padding-bottom: clamp(78px, 10svh, 96px) !important;
  }
}

/* =====================================================================
   NOSOTROS · ESCRITORIO — la sección cabía a presión: relato, trayectoria,
   mapa y las tres disciplinas se apilaban y desbordaban la pantalla.
   Ahora es una composición de dos filas dentro del área segura:
     fila 1 → relato + trayectoria  |  mapa
     fila 2 → banda "Cómo trabajamos": puente + 01 / 02 / 03 en línea
   Así "Cómo trabajamos" queda integrado como cierre, no como apéndice.
   ===================================================================== */
@media (min-width: 921px) and (min-height: 541px) {
  #nosotros .about-body {
    display: grid;
    margin-top: clamp(20px, 3.6vh, 48px);
    grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
    grid-template-rows: minmax(0, 1fr) auto;
    column-gap: clamp(24px, 2.6vw, 48px);
    row-gap: clamp(20px, 3vh, 38px);
  }
  #nosotros .nos-c__top {
    grid-area: 1 / 1; max-width: none; min-width: 0; margin-top: 0;
  }
  #nosotros .nos-c__intro { display: flex; flex-direction: column; gap: clamp(16px, 2.6vh, 32px); }
  #nosotros .nos-c__cred { margin-top: 0; }
  /* El grupo intro + trayectoria se centra ópticamente frente al mapa: el aire
     queda repartido arriba y abajo en vez de acumularse en un hueco. */
  #nosotros .nos-c__top { align-self: center; }
  /* Chips siempre en 2 × 2: la columna es más angosta que en el diseño previo */
  #nosotros .nos-c__chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  #nosotros .nos-c__chips .tag { text-align: center; }

  /* Mapa: deja de flotar en absoluto y ocupa su propia celda, con altura
     acotada para que nunca empuje la banda inferior fuera de pantalla. */
  #nosotros .nos-c__map {
    grid-area: 1 / 2; position: static; inset: auto;
    width: auto; margin: calc(-1 * clamp(78px, 13vh, 152px)) 0 0; min-height: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: clamp(10px, 1.6vh, 18px);
  }
  #nosotros .nos-c__map .nos-c__mapwrap {
    flex: 1 1 auto; min-height: 0;
    width: 100%; max-width: none;
    height: auto; max-height: clamp(230px, 54vh, 620px);
    object-fit: contain; transform: none;
    filter: drop-shadow(0 22px 48px rgba(0,0,0,0.6));
  }

  /* Banda de cierre: una sola fila de cuatro columnas sobre la misma regla */
  #nosotros .nos-c__work {
    --band-pt: clamp(16px, 2.4vh, 28px);
    grid-area: 2 / 1 / 3 / -1;
    margin: 0; padding-top: var(--band-pt);
    border-top: 1px solid var(--line-strong);
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) repeat(3, minmax(0, 1fr));
    column-gap: clamp(24px, 2.8vw, 52px);
    align-items: start;
  }
  #nosotros .nos-c__work-head { margin: 0; }
  #nosotros .nos-c__work-lead { max-width: 36ch; }
  #nosotros .nos-c__flow { display: contents; }
  #nosotros .nos-c__step { padding: 0; }
  #nosotros .nos-c__step::before { top: calc(-1px - var(--band-pt)); width: 34px; }
  #nosotros .nos-c__step h3 { margin: 8px 0 8px; }
  #nosotros .nos-c__step p { max-width: 30ch; }
}

/* =====================================================================
   AUDITORÍA MÓVIL — objetivos táctiles (≥44px) y micro-tipografía.
   Bloque final: sólo móvil, sin tocar el escritorio. Donde el retículo no
   admite crecer, se amplía el área de toque con padding compensado por
   margen negativo (el texto no se mueve un píxel).
   ===================================================================== */
@media (max-width: 920px) {
  /* Logo: caja de toque de 44px sin desplazar el logotipo dentro de la barra */
  .chrome__logo { top: calc(env(safe-area-inset-top, 0px) + 6px); padding: 9px 16px 9px 0; }
  /* Pie del menú: accesos directos con altura de dedo y etiqueta legible */
  .menu__row { min-height: 44px; justify-content: center; }
  .menu__row span { font-size: 10px; }
  /* Teléfono y email de Contacto: área de toque ampliada, ritmo intacto */
  #contacto .cinfo__val { display: inline-flex; align-items: center; min-height: 44px; padding: 9px 0; margin: -9px 0; }
  /* Campos del formulario: 44px reales */
  #contacto .ct-form input, #contacto .ct-form select, #contacto .ct-form textarea { min-height: 44px; }
  #contacto .ct-actions button.lnk { min-height: 44px !important; }
  /* Indicador de scroll por encima del mínimo legible */
  .hint { font-size: 10px; }
}

/* =====================================================================
   MANUAL DE MARCA · REV.01 — dos piezas que faltaban del sistema:
   el relato del signo (la «M» como águila) y la firma verbal de cierre.
   Ninguna altera la retícula: el signo vive dentro de la celda del mapa
   (la imagen flexiona) y la firma cierra Contacto sobre el pie.
   ===================================================================== */
.nos-c__signo {
  align-self: stretch; display: block;
  margin: clamp(12px, 2vh, 20px) 0 0;
  border-left: 2px solid var(--accent); padding: 1px 0 1px 14px;
  max-width: 46ch;
}
/* El signo ES la «M» de la frase: va dentro del texto, sentado en la línea base
   y con la altura de una mayúscula del propio párrafo. */
.nos-c__signo .nos-c__m {
  display: inline-block; width: auto; height: 1.15em;
  vertical-align: -0.22em; margin: 0 0.5px; opacity: 0.95;
}
.nos-c__signo span {
  font-family: var(--font-mono); font-size: 11px; line-height: 1.6;
  color: var(--ink-faint); text-wrap: pretty;
}
.nos-c__signo b { color: var(--ink-mute); font-weight: 500; }

/* Entrada del eslogan: ver el bloque .hero-title .hw en «INICIO» (una sola
   implementación, animada por CSS cuando la sección está activa). */

/* =====================================================================
   CONTACTO MÓVIL · CAMPOS CON SUPERFICIE PROPIA
   El formulario vive sobre el mapa: con solo una línea inferior los campos
   se camuflaban. Cada campo pasa a ser una caja oscura con borde; el foco
   la enciende en lima. Bloque final → gana por cascada.
   ===================================================================== */
@media (max-width: 920px) {
  #contacto .ct-form { position: relative; z-index: 2; }
  #contacto .ct-form input,
  #contacto .ct-form textarea,
  #contacto .ct-form select {
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(255,255,255,0.16) !important;
    border-bottom: 1px solid rgba(255,255,255,0.16) !important;
    border-radius: 8px !important;
    padding: 14px 15px !important;
    color: var(--ink) !important;
    transition: border-color .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease);
  }
  #contacto .ct-form textarea { min-height: 92px !important; }
  #contacto .ct-form input::placeholder,
  #contacto .ct-form textarea::placeholder { color: #7a7a7a !important; }
  #contacto .ct-form input:focus,
  #contacto .ct-form textarea:focus,
  #contacto .ct-form select:focus {
    border-color: var(--accent) !important;
    background: rgba(230,254,44,0.06) !important;
    box-shadow: 0 0 0 3px var(--accent-dim);
    outline: none;
  }
  /* Etiqueta un poco más presente y separada de su caja */
  #contacto .ct-form .field-note {
    color: var(--ink-mute) !important; font-size: 10.5px !important;
    letter-spacing: 0.16em; margin-bottom: 8px !important;
  }
  #contacto .ct-form__row + .ct-form__row { margin-top: 16px !important; }
  #contacto .ct-form__row > div + div { margin-top: 16px; }
  /* Dato indispensable sin llenar: el campo se marca en lima */
  #contacto .ct-form .is-missing {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px var(--accent-dim);
  }
}

/* Firma verbal — Anton, mayúsculas, lima sobre oscuro. Nunca se reescribe. */
.ct-sign {
  margin-top: clamp(18px, 3vh, 32px);
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(19px, 2.1vw, 28px); line-height: 1;
  letter-spacing: 0.02em; text-transform: uppercase; color: var(--accent);
}


/* =====================================================================
   ESCRITORIO · PULIDO FINAL (cascada final, solo pantallas grandes)
   1 · Un solo lenguaje de botón, igual que en móvil: primario = bloque lima,
       secundario = texto gris con flecha lima.
   2 · Hero: el lima queda en FUTURO + botón; las cifras y la nota pasan a
       línea neutra (mismo criterio que la versión móvil).
   3 · Contacto: los campos son cajas visibles sobre el mapa, no hairlines.
   Sin condición de altura: en ventanas anchas pero bajas el sitio usa el modo
   flujo, y estas reglas de componente aplican igual.
   ===================================================================== */
@media (min-width: 921px) {

  /* --- 1 · PRIMARIO: bloque lima (btn-circ, cotizar servicio, cotizar proyecto) --- */
  .btn-circ, .pj-foot__lnk, .svc-quote {
    display: inline-flex; align-items: center; gap: 14px;
    min-height: 50px; padding: 0 22px;
    border: 1px solid var(--accent); border-radius: 6px;
    background: var(--accent); color: #0A0A0A;
    font-family: var(--font-mono); font-size: 12px; font-weight: 700;
    letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none;
    transition: filter .3s var(--ease), box-shadow .3s var(--ease), transform .25s var(--ease);
  }
  .btn-circ:hover, .pj-foot__lnk:hover, .svc-quote:hover {
    background: var(--accent); color: #0A0A0A;
    filter: brightness(0.94); box-shadow: 0 0 0 4px var(--accent-dim);
    transform: translateY(-1px);
  }
  .btn-circ::after { display: none; }          /* fuera el subrayado tipográfico */
  .btn-circ .dot { display: none; }            /* el punto lima ya no hace falta */
  .btn-circ .circ {
    width: 30px; height: 30px; flex: none; border-radius: 50%;
    background: rgba(0,0,0,0.18); color: #0A0A0A; font-size: 15px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .btn-circ:hover .circ > i { transform: translateX(3px); }

  /* --- 1b · SECUNDARIO: texto gris + flecha lima (hero y contacto) --- */
  #inicio .hero-cta .lnk:not(.hero-contact-mob), .ct-actions .lnk {
    display: inline-flex; align-items: center; gap: 10px;
    border-bottom: 0; padding-bottom: 0; color: var(--ink-mute);
  }
  #inicio .hero-cta .lnk:not(.hero-contact-mob)::after, .ct-actions .lnk::after {
    content: '\2192'; font-size: 18px; line-height: 1; color: var(--accent);
    transition: transform .3s var(--ease);
  }
  #inicio .hero-cta .lnk:not(.hero-contact-mob):hover, .ct-actions .lnk:hover { color: var(--ink); border-color: transparent; }
  #inicio .hero-cta .lnk:not(.hero-contact-mob):hover::after, .ct-actions .lnk:hover::after { transform: translateX(5px); }
  /* El CTA exclusivo de móvil sigue fuera del hero de escritorio */
  #inicio .hero-cta .hero-contact-mob { display: none; }

  /* --- 2 · Hero: acentos reducidos a dos --- */
  #inicio .hero-note { border-left: 1px solid var(--line-strong); }
  #inicio .hstat { border-left: 1px solid var(--line-strong); }

  /* --- 3 · Contacto: campos con superficie propia sobre el mapa --- */
  #contacto .ct-form input,
  #contacto .ct-form textarea,
  #contacto .ct-form select {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 8px;
    padding: 11px 14px;
    color: var(--ink);
    transition: border-color .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease);
  }
  #contacto .ct-form textarea { min-height: 72px; }
  #contacto .ct-form input::placeholder,
  #contacto .ct-form textarea::placeholder { color: #7a7a7a; }
  #contacto .ct-form input:focus,
  #contacto .ct-form textarea:focus,
  #contacto .ct-form select:focus {
    border-color: var(--accent);
    background: rgba(230,254,44,0.06);
    box-shadow: 0 0 0 3px var(--accent-dim);
    outline: none;
  }
  #contacto .ct-form .is-missing { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }
  #contacto .sel::after { right: 15px; bottom: 15px; }
  #contacto .ct-form .field-note { color: var(--ink-mute); margin-bottom: 6px; }
  /* El formulario creció al enmarcar los campos: se recupera altura ajustando
     el aire entre filas para que las acciones no pisen el paginador. */
  #contacto .ct-form { margin-top: clamp(20px, 3vh, 30px); }
  #contacto .ct-form__lbl { margin-bottom: 16px; }
  #contacto .ct-form__row + .ct-form__row { margin-top: 16px; }
  /* Bordes derechos alineados: el proyecto ocupa el ancho del formulario y las
     acciones bajan a su propia fila (antes el textarea cortaba a media reja). */
  #contacto .ct-form__row--msg { grid-template-columns: 1fr; }
  #contacto .ct-actions { flex-direction: row; align-items: center; gap: 30px; margin-top: 18px; }
  #contacto .ct-foot { margin-top: clamp(18px, 2.6vh, 28px); }

  /* --- 4 · El pin del mapa recupera el lima: el gris se aplica solo a las
     teselas, no a todo el contenedor (antes el filtro desaturaba el marcador) --- */
  .ct-map { filter: none; }
  .ct-map .leaflet-tile-pane { filter: grayscale(1) brightness(0.85) contrast(1.04); }

  /* --- 5 · Nosotros: los chips de sector toman su ancho natural y dejan de
     tocar el borde de la columna (antes reja 2×2 a ras) --- */
  #nosotros .nos-c__chips { display: grid; grid-template-columns: repeat(2, max-content); gap: 8px; }
  #nosotros .nos-c__chips .tag { text-align: center; }
}

/* =====================================================================
   ESCRITORIO · COMPOSICIÓN Y FOTOGRAFÍA (puntos 4 y 5 de la auditoría)
   4 · Se elimina la banda muerta bajo los títulos: las dos columnas de
       Servicios y Filosofía cuelgan del mismo eje y llenan la altura.
   5 · Las fotos vuelven a leerse como fotos: menos velo plano, más
       degradado lateral, y reencuadre para que la obra quede en cuadro.
   ===================================================================== */
@media (min-width: 921px) and (min-height: 541px) {

  /* --- 4a · SERVICIOS: panel y lista ocupan la misma franja vertical --- */
  #servicios .svc-grid { align-items: stretch; }
  #servicios .svc-panel { justify-content: flex-start; }
  #servicios .svc-cta { margin-top: auto; }        /* el botón ancla el pie */
  #servicios .svc-row { padding: clamp(9px, 1.35vh, 13px) 0; }

  /* --- 4b · FILOSOFÍA: manifiesto arriba, pilares al pie, método repartido --- */
  #filosofia .phil-a { align-items: stretch; }
  #filosofia .phil-a__lead { display: flex; flex-direction: column; }
  /* El manifiesto es el protagonista: crece para llenar la columna en vez de
     dejar un hueco entre él y los pilares. */
  #filosofia .phil-a__manifesto { font-size: 37px; }
  #filosofia .phil-a__pillars { margin-top: auto; }
  #filosofia .phil-a__method { justify-content: flex-start; }
  #filosofia .phil-a__list { flex: 1; justify-content: space-between; }

  /* --- 5a · SERVICIOS: la foto deja de ser textura sucia --- */
  #servicios .svc-bg__img { filter: grayscale(0.22) contrast(1.08); }
  #servicios .svc-bg__img.on { opacity: 0.58; }
  #servicios .svc-bg__scrim {
    background:
      linear-gradient(90deg, rgba(12,13,13,0.97) 0%, rgba(12,13,13,0.9) 26%, rgba(12,13,13,0.52) 60%, rgba(12,13,13,0.64) 100%),
      linear-gradient(180deg, rgba(12,13,13,0.9) 0%, rgba(12,13,13,0) 34%, rgba(12,13,13,0) 60%, rgba(12,13,13,0.95) 100%);
  }

  /* --- 5b · PROYECTOS: se recorta cielo y sube la exposición del lado libre --- */
  #proyectos .pj-bg__img {
    background-position: 50% 66%;
    filter: grayscale(0.12) brightness(0.82) contrast(1.06);
  }
  #proyectos .pj-bg__scrim {
    background:
      linear-gradient(90deg, rgba(12,13,13,0.97) 0%, rgba(12,13,13,0.9) 34%, rgba(12,13,13,0.4) 72%, rgba(12,13,13,0.58) 100%),
      linear-gradient(180deg, rgba(12,13,13,0.72) 0%, rgba(12,13,13,0.1) 26%, rgba(12,13,13,0.22) 56%, rgba(12,13,13,0.97) 100%);
  }
}

/* =====================================================================
   HERO · CURVAS DE NIVEL + NOSOTROS · EL SIGNO COMO PIEZA
   La topografía que ya identifica a Filosofía y Nosotros entra también al
   hero, pesada abajo (la máquina pisa terreno) y disuelta arriba para no
   competir con el eslogan. La nota de la «M» deja de ser letra chica
   flotante: se vuelve el pie de firma del mapa, con el signo a tamaño real.
   ===================================================================== */
@media (min-width: 921px) {
  #inicio .slide__bg::before {
    content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: url('../img/trama-curvas-ink-min.svg') 42% 68% / 132% no-repeat;
    opacity: 0.34;
    -webkit-mask-image: linear-gradient(180deg, transparent 6%, #000 46%, #000 100%);
            mask-image: linear-gradient(180deg, transparent 6%, #000 46%, #000 100%);
  }
  /* Velo sobre el terreno en la columna de texto: el eslogan y las cifras
     se leen limpios y las curvas siguen vivas del lado de la máquina. */
  #inicio .slide__bg::after {
    content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(96deg, rgba(10,10,10,0.9) 0%, rgba(10,10,10,0.66) 26%, rgba(10,10,10,0.2) 44%, transparent 56%);
  }
  /* El signo del águila, a la izquierda de su relato, bajo el mapa */
  #nosotros .nos-c__signo {
    display: grid; grid-template-columns: auto minmax(0, 1fr);
    column-gap: clamp(18px, 1.8vw, 26px); align-items: start;
    margin: clamp(16px, 2.6vh, 26px) 0 0; padding: clamp(14px, 2vh, 20px) 0 0;
    border-left: 0; border-top: 1px solid var(--line-strong);
    max-width: none;
  }
  #nosotros .nos-c__signo-mark {
    display: block; width: clamp(46px, 4.2vw, 62px); height: auto;
    opacity: 0.92; filter: drop-shadow(0 6px 18px rgba(0,0,0,0.5));
  }
  #nosotros .nos-c__signo-lbl {
    display: block; font-style: normal;
    font-family: var(--font-mono); font-size: 10px; font-weight: 600;
    letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent);
    margin-bottom: 9px;
  }
  #nosotros .nos-c__signo span { font-size: 12.5px; line-height: 1.72; color: var(--ink-mute); }
  #nosotros .nos-c__signo b { color: var(--ink); font-weight: 600; }
  /* Con el signo grande al lado, el glifo diminuto dentro del texto sobraba:
     en escritorio la «M» se escribe con la display en lima. */
  #nosotros .nos-c__signo .nos-c__m { display: none; }
  #nosotros .nos-c__m-alt {
    font-family: var(--font-display); font-size: 1.15em; line-height: 1;
    color: var(--accent); letter-spacing: 0.02em;
  }
  /* Mapa y su pie comparten eje con la firma: se quita el corrimiento lateral */
  #nosotros .nos-c__map .nos-c__mapwrap { transform: none; align-self: center; }
}
/* En móvil la pieza sigue siendo la nota con regla lima: el signo grande y su
   etiqueta se omiten para no repetir el logotipo de la cabecera. */
@media (max-width: 920px) {
  .nos-c__signo-mark, .nos-c__signo-lbl, .nos-c__m-alt { display: none; }
}

/* =====================================================================
   NOSOTROS · NUEVO LAYOUT DE ESCRITORIO (bloque final)
   Tres franjas en vez de dos columnas apretadas:
     1 · relato + trayectoria  |  mapa
     2 · EL SIGNO como banda con su propia regla, a todo el ancho
     3 · Cómo trabajamos (puente + 01/02/03)
   Y toda la microtipografía sube de escala: el problema no era el orden,
   era que todo vivía entre 9 y 12 px.
   ===================================================================== */
@media (min-width: 921px) and (min-height: 541px) {
  #nosotros .about-body {
    grid-template-columns: minmax(0, 0.98fr) minmax(0, 1.02fr);
    grid-template-rows: minmax(0, 1fr) auto auto;
    column-gap: clamp(34px, 3.6vw, 68px);
    row-gap: clamp(12px, 1.9vh, 20px);
    margin-top: clamp(12px, 2.2vh, 28px);
  }
  /* Esta sección carga tres franjas: recupera altura afinando su propio
     margen vertical (el resto de las secciones conserva el de siempre). */
  #nosotros .sw { padding-top: clamp(78px, 9.6vh, 96px); padding-bottom: clamp(58px, 7.2vh, 80px); }

  /* --- Franja 1 · el relato manda: cuerpo mayor y medida ancha --- */
  #nosotros .nos-c__top { grid-area: 1 / 1; }
  #nosotros .nos-c__intro { justify-content: space-between; gap: clamp(20px, 3.4vh, 42px); height: 100%; }
  #nosotros .nos-c__lead { font-size: clamp(14.5px, 1.22vw, 17px); line-height: 1.66; max-width: 58ch; }
  #nosotros .nos-c__chapter { font-size: 11.5px; margin-bottom: 16px; }
  #nosotros .nos-c__meta { gap: clamp(22px, 2.4vw, 34px); padding-top: clamp(16px, 2.2vh, 22px); }
  #nosotros .nos-c__stat b { font-size: clamp(26px, 2.4vw, 34px); }
  #nosotros .nos-c__lbl { font-size: 10.5px; }
  #nosotros .nos-c__chips { grid-template-columns: repeat(2, max-content); gap: 9px; }
  #nosotros .nos-c__chips .tag { font-size: 10.5px; padding: 7px 12px; letter-spacing: 0.12em; }

  /* --- Franja 1 · mapa: sin el margen negativo, centrado en su celda --- */
  #nosotros .nos-c__map {
    grid-area: 1 / 2; margin: 0; justify-content: flex-start;
    gap: clamp(12px, 1.8vh, 20px);
  }
  #nosotros .nos-c__map .nos-c__mapwrap { max-height: clamp(190px, 27vh, 280px); }
  #nosotros .nos-c__cap { font-size: 10.5px; }

  /* --- Franja 2 · EL SIGNO: banda de firma a todo el ancho --- */
  #nosotros .nos-c__signo {
    grid-area: 2 / 1 / 3 / -1;
    display: grid; grid-template-columns: auto minmax(0, 1fr);
    column-gap: clamp(18px, 2vw, 28px); align-items: center;
    margin: 0; padding: clamp(12px, 1.8vh, 20px) 0 0;
    border-left: 0; border-top: 1px solid var(--line-strong);
    max-width: none;
  }
  #nosotros .nos-c__signo-mark { width: clamp(40px, 3.4vw, 54px); }
  #nosotros .nos-c__signo { padding-top: clamp(10px, 1.4vh, 15px); }
  #nosotros .nos-c__signo-txt { display: flex; align-items: baseline; gap: clamp(14px, 1.6vw, 22px); flex-wrap: wrap; }
  #nosotros .nos-c__signo-lbl { margin: 0; flex: none; }
  #nosotros .nos-c__signo span { font-size: 13px; line-height: 1.68; max-width: 104ch; }

  /* --- Franja 3 · cierre: disciplinas con aire y cuerpo legible --- */
  #nosotros .nos-c__work { grid-area: 3 / 1 / 4 / -1; column-gap: clamp(30px, 3.2vw, 60px); }
  #nosotros .nos-c__work-lead { font-size: clamp(12.5px, 1.05vw, 13.5px); line-height: 1.64; max-width: 40ch; }
  #nosotros .nos-c__step b { font-size: 12.5px; }
  #nosotros .nos-c__step h3 { font-size: clamp(17px, 1.6vw, 21px); margin: 8px 0 7px; }
  #nosotros .nos-c__step p { font-size: 12.5px; line-height: 1.62; max-width: 34ch; }
}

/* =====================================================================
   NOSOTROS · MENOS BLOQUES, MÁS AIRE (bloque final — manda)
   Se suprimieron: el stat «+17» (ya lo dice el hero y 2009), la leyenda del
   mapa (la etiqueta y el estado en lima bastan) y el puente de «Cómo
   trabajamos» (la etiqueta y el 01/02/03 se explican solos). Los chips de
   sector pasan a una sola línea de texto y el relato del signo se mudó a
   Filosofía, donde llena el hueco entre el manifiesto y los pilares.
   Resultado: dos franjas — relato + mapa, y las tres disciplinas al ancho.
   ===================================================================== */
@media (min-width: 921px) and (min-height: 541px) {
  /* Vuelve al margen vertical estándar del sitio: ya no hacen falta atajos */
  #nosotros .sw { padding-top: var(--pad-y); padding-bottom: var(--pad-y); }
  #nosotros .about-body {
    grid-template-rows: minmax(0, 1fr) auto;
    row-gap: clamp(16px, 2.4vh, 28px);
    margin-top: clamp(18px, 3vh, 40px);
  }
  #nosotros .nos-c__lead { line-height: 1.68; max-width: 52ch; }
  #nosotros .nos-c__intro { gap: clamp(20px, 3vh, 34px); }

  /* 2009 queda solo: puede crecer */
  #nosotros .nos-c__stat b { font-size: clamp(30px, 2.9vw, 42px); }
  #nosotros .nos-c__meta { align-items: flex-start; gap: clamp(26px, 3vw, 44px); }

  /* Sectores: una línea de texto separada por puntos, no cuatro cajas */
  #nosotros .nos-c__chips { display: flex; flex-wrap: wrap; gap: 2px 9px; align-items: baseline; }
  #nosotros .nos-c__chips .tag {
    border: 0; background: none; padding: 0; border-radius: 0;
    font-size: 11.5px; letter-spacing: 0.12em; color: var(--ink-mute);
  }
  /* El separador viaja con la palabra anterior: si la línea salta, la nueva
     empieza con texto y no con un punto huérfano. */
  #nosotros .nos-c__chips .tag:not(:last-child)::after {
    content: '\00B7'; margin-left: 9px; color: var(--ink-faint);
  }

  /* El mapa recupera tamaño con el aire liberado */
  #nosotros .nos-c__map { justify-content: center; }
  #nosotros .nos-c__map .nos-c__mapwrap { max-height: clamp(230px, 36vh, 380px); }

  /* Franja de cierre: etiqueta, regla y tres columnas anchas */
  #nosotros .nos-c__work {
    grid-area: 2 / 1 / 3 / -1;
    display: block; border-top: 0; padding-top: 0; margin: 0;
  }
  #nosotros .nos-c__work-head { margin: 0 0 clamp(14px, 2.2vh, 22px); }
  #nosotros .nos-c__flow {
    --band-pt: clamp(18px, 2.6vh, 28px);
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: clamp(34px, 4vw, 78px);
    border-top: 1px solid var(--line-strong); padding-top: var(--band-pt);
  }
  #nosotros .nos-c__step { padding: 0; }
  #nosotros .nos-c__step::before { top: calc(-1px - var(--band-pt)); width: 34px; }
  #nosotros .nos-c__step h3 { font-size: clamp(18px, 1.7vw, 22px); margin: 10px 0 9px; }
  #nosotros .nos-c__step p { font-size: 13px; line-height: 1.7; max-width: 42ch; }

}

/* =====================================================================
   NOSOTROS · EL MAPA MANDA EN SU MITAD (bloque final)
   El mapa crece: gana altura, ocupa todo el ancho de su celda y se extiende
   hacia el canal derecho. La franja de cierre cede unos píxeles de aire
   interno para que ese crecimiento no empuje nada fuera de pantalla.
   ===================================================================== */
@media (min-width: 921px) and (min-height: 541px) {
  #nosotros .nos-c__map {
    position: relative;
    margin-right: calc(-1 * clamp(24px, 4vw, 82px));
    justify-content: flex-start; gap: 0;
  }
  /* La etiqueta pasa a flotar en la esquina: el mapa se queda con toda la
     altura de la franja en vez de cederle una banda. */
  #nosotros .nos-c__map .nos-c__chapter--map { position: absolute; top: 4px; left: 61%; right: auto; margin: 0; z-index: 2; }
  /* El envoltorio conserva la proporción del archivo (no hay franjas vacías de
     "contain"), así el foco lima siempre cae sobre el Estado de México. */
  #nosotros .nos-c__map .nos-c__mapwrap {
    height: 100%; width: auto; max-width: 100%; max-height: none;
    /* 15% extra sin reflujo: crece hacia arriba-izquierda (zona vacía), así la
       regla de la franja de cierre queda intacta. */
    transform: scale(1.15); transform-origin: bottom right;
  }
  #nosotros .nos-c__work-head { margin-bottom: clamp(8px, 1.4vh, 14px); }
  #nosotros .nos-c__flow { --band-pt: clamp(12px, 1.8vh, 20px); }
  #nosotros .nos-c__step h3 { font-size: clamp(17px, 1.5vw, 19px); margin: 7px 0 6px; }
  #nosotros .nos-c__step p { font-size: 12.5px; line-height: 1.6; }
}

/* =====================================================================
   ESCRITORIO · RITMO VERTICAL Y COLISIONES (bloque final — manda)
   Auditoría a proporción real: el contenido estaba anclado arriba con
   márgenes en vh que topan su máximo, así que en pantallas altas sobraba
   una franja muerta abajo; y en ventanas de 921–1150px el riel derecho se
   montaba sobre el contenido. Aquí cada pantalla reparte su altura.
   ===================================================================== */
@media (min-width: 921px) and (min-height: 541px) {
  /* El canal derecho nunca baja de lo que mide el riel + sus etiquetas */
  :root { --pad-r: clamp(158px, 14vw, 230px); }

  /* --- 01 INICIO: la máquina se queda en su mitad, las cifras en la suya --- */
  .hero-mach { width: min(48vw, 820px); }
  .hero-floor { width: min(40vw, 660px); }
  .hero-stats { max-width: min(54ch, 42vw); gap: clamp(18px, 2.4vw, 40px); }
  /* Escritorio angosto (921–1100px): los clamps del bloque lima tocan su mínimo,
     así que las cifras pasan a 2×2 en vez de invadir la columna de la máquina. */
  @media (max-width: 1100px) {
    .hero-stats { flex-wrap: wrap; max-width: min(40ch, 40vw); row-gap: clamp(14px, 2vh, 22px); }
    .hstat { flex: 0 0 calc(50% - clamp(9px, 1.2vw, 20px)); }
  }
  .hero-note, .hero-title { max-width: min(52ch, 46vw); }
  .hero-block { width: clamp(190px, 16vw, 260px); right: clamp(280px, 23vw, 430px); }
  .hero-block__lbl { max-height: calc(100% - 40px); overflow: hidden; font-size: clamp(8px, 0.62vw, 10px); }

  /* --- 02 SERVICIOS: el índice ocupa toda la altura de su columna --- */
  #servicios .svc-grid { align-items: stretch; }
  #servicios .svc-rows { align-self: stretch; justify-content: stretch; }
  #servicios .svc-rows > li { display: flex; flex: 1; min-height: 0; }
  #servicios .svc-row { flex: 1; align-items: center; padding-block: 0; }

  /* --- 03 PROYECTOS: aire entre la ficha y la fila de pestañas --- */
  #proyectos .pj__info { padding-bottom: clamp(10px, 4vh, 48px); }
  #proyectos .pj-foot { margin-top: clamp(22px, 4vh, 42px); }

  /* --- 05 FILOSOFÍA: las dos columnas respiran a la misma altura --- */
  #filosofia .phil-a { align-items: stretch; }
  #filosofia .phil-a__lead { display: flex; flex-direction: column; justify-content: center; }
  /* El relato del signo ya no vive aquí: los pilares dejan de anclarse al fondo
     y vuelven a colgar del manifiesto como un solo bloque centrado. */
  #filosofia .phil-a__pillars { margin-top: clamp(30px, 6vh, 68px); }
  #filosofia .phil-a__list { flex: 1; justify-content: space-evenly; }

  /* --- 06 CONTACTO: la pantalla se reparte de cabecera a pie --- */
  #contacto .sw { justify-content: space-between; }
  #contacto .ct-info, #contacto .ct-form, #contacto .ct-foot { margin-top: 0; }
  #contacto .ct-form { max-width: min(920px, 64vw); }
  #contacto .ct-form__row + .ct-form__row { margin-top: clamp(20px, 3vh, 34px); }
}

/* =====================================================================
   HOMOGENEIZACIÓN 02–05 (bloque final — manda)
   Servicios, Proyectos, Nosotros y Filosofía se habían diseñado por
   separado: cada una traía su propia retícula, su escala de texto y su
   forma de numerar. Aquí comparten UN sistema — misma distancia bajo la
   cabecera, misma partición en dos columnas con hairline, misma etiqueta
   de capítulo, mismo numeral fantasma y la misma escala tipográfica.
   No toca Inicio, Contacto ni el modo móvil.
   ===================================================================== */
@media (min-width: 921px) and (min-height: 541px) {
  :root { --sec-gap: clamp(26px, 4.4vh, 52px); --col-div: clamp(30px, 3vw, 52px); }

  /* 1 · Misma respiración entre la cabecera y el cuerpo en las cuatro */
  #servicios .svc-grid, #proyectos .pj-stage,
  #nosotros .about-body, #filosofia .phil-a { margin-top: var(--sec-gap); }

  /* 2 · Misma partición: columna de relato ancha + columna de índice,
     separadas por el mismo hilo vertical (antes solo lo tenía Filosofía) */
  #servicios .svc-grid, #filosofia .phil-a, #nosotros .about-body {
    grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
    column-gap: clamp(38px, 4.4vw, 70px);
  }
  #servicios .svc-list, #filosofia .phil-a__method {
    border-left: 1px solid var(--line); padding-left: var(--col-div);
  }
  /* El mapa conserva la sangría de columna pero sin la regla divisoria */
  #nosotros .nos-c__map { padding-left: var(--col-div); }
  #filosofia .phil-a__method { padding-left: var(--col-div); }

  /* 3 · Etiqueta de capítulo idéntica en las cuatro pantallas */
  .chap, .nos-c__chapter, .phil-a__kicker {
    display: inline-flex; align-items: center; gap: 12px;
    font-family: var(--font-mono); font-size: 11px; font-weight: 600;
    letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink);
  }
  .chap::before, .nos-c__chapter::before { content: ''; width: 22px; height: 2px; background: var(--accent); flex: none; }
  .phil-a__kicker i { width: 22px; height: 2px; }
  .phil-a__kicker em { letter-spacing: 0.16em; color: var(--ink-faint); }

  /* 4 · Numeral fantasma: un solo tamaño y un solo trazo */
  .svc-panel__num, .pj__num {
    font-size: clamp(96px, 11.5vw, 186px); line-height: 0.86;
    color: transparent; -webkit-text-stroke: 1px rgba(230,254,44,0.24);
  }

  /* 5 · Una sola escala tipográfica para todo el bloque central */
  .svc-panel h3, .pj__name { font-size: clamp(24px, 2.6vw, 38px); line-height: 1.06; letter-spacing: 0.02em; }
  .svc-panel p, .pj__desc {
    margin-top: 14px; font-size: clamp(13px, 1.02vw, 14.5px);
    line-height: 1.72; max-width: 46ch; color: var(--ink-mute);
  }
  .svc-row__name, .phil-a__pillar h4, .phil-a__list h5,
  #nosotros .nos-c__step h3 {
    font-size: clamp(15px, 1.35vw, 18.5px); letter-spacing: 0.04em; line-height: 1.14;
  }
  .phil-a__pillar p, .phil-a__list p, #nosotros .nos-c__step p { font-size: 12.5px; line-height: 1.66; }
  #nosotros .nos-c__lead { font-size: clamp(13px, 1.02vw, 14.5px); line-height: 1.72; }
  .phil-a__num, .phil-a__list b, #nosotros .nos-c__step b { font-size: 12px; letter-spacing: 0.16em; }
  #nosotros .nos-c__chapter { font-size: 11px; letter-spacing: 0.22em; }

  /* 6 · Reglas: la que abre una banda es fuerte, la que separa ítems es suave */
  .pj-index { border-top: 1px solid var(--line-strong); }
  #proyectos .pj-idx { flex: 1; min-width: 280px; display: flex; flex-direction: column; gap: clamp(10px, 1.6vh, 16px); }
  #proyectos .pj-index { flex: none; min-width: 0; }
  #proyectos .pj-foot__nav { align-self: flex-end; }

  /* 7 · El índice de servicios se comporta como el método de Filosofía */
  #servicios .svc-list {
    display: flex; flex-direction: column; align-self: stretch;
    gap: clamp(13px, 1.8vh, 19px); min-height: 0;
  }
  #servicios .svc-rows { flex: 1; border-left: 0; padding-left: 0; }

  /* 8 · Las dos pantallas con foto a sangre reciben el mismo revelado */
  .svc-bg__img { filter: grayscale(0.32) brightness(0.6) contrast(1.04); }
  .svc-bg__img.on { opacity: 0.4; }
  .svc-bg__scrim {
    background:
      linear-gradient(90deg, rgba(12,13,13,0.96) 0%, rgba(12,13,13,0.86) 36%, rgba(12,13,13,0.74) 76%, rgba(12,13,13,0.82) 100%),
      linear-gradient(180deg, rgba(12,13,13,0.92) 0%, rgba(12,13,13,0.12) 24%, rgba(12,13,13,0.18) 58%, rgba(12,13,13,0.96) 100%);
  }
}

/* =====================================================================
   02 SERVICIOS · MOSAICO DE OCHO (bloque final — manda)
   La lista con panel lateral obligaba a cazar filas con el mouse y dejaba
   la fotografía relegada a un telón desvaído. Servicios pasa a ser un
   MOSAICO: las ocho líneas se ven de una sola vez, cada una con su propia
   obra de fondo. Proyectos conserva su idea — UNA obra a pantalla completa
   con la ficha abajo —, así que las dos pantallas hablan el mismo idioma
   (numeral, nombre, descripción, regla lima) con ritmos distintos:
   ocho piezas frente a una sola a sangre. Solo escritorio.
   ===================================================================== */
@media (min-width: 921px) and (min-height: 541px) {
  /* El telón fotográfico baja a textura ambiental: ahora la foto vive en las piezas */
  #servicios .svc-bg__img.on { opacity: 0.12; }

  #servicios .svc-grid {
    display: flex; flex-direction: column;
    gap: clamp(16px, 2.4vh, 26px);
    align-items: stretch;
  }
  #servicios .svc-panel { display: none; }
  #servicios .svc-list {
    border-left: 0; padding-left: 0;
    flex: 1; min-height: 0; gap: clamp(12px, 1.8vh, 18px);
  }

  #servicios .svc-rows {
    display: grid; flex: 1; min-height: 0;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: minmax(0, 1fr);
    gap: clamp(10px, 1.1vw, 16px);
  }
  #servicios .svc-rows > li { display: flex; min-height: 0; }
  #servicios .svc-row {
    position: relative; flex: 1; min-width: 0;
    display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start;
    gap: 0; padding: clamp(14px, 1.5vw, 20px);
    border: 0; overflow: hidden; text-align: left;
    background: var(--surface);
    transition: none;
  }
  /* Fotografía de la línea de servicio */
  #servicios .svc-row__img {
    display: block; position: absolute; inset: 0; z-index: 0;
    background-size: cover; background-position: 50% 50%;
    filter: grayscale(0.78) brightness(0.44) contrast(1.06);
    transform: scale(1.03);
    transition: filter .55s var(--ease), transform .8s var(--ease);
  }
  #servicios .svc-row::after {
    content: ''; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(180deg, rgba(12,13,13,0.1) 0%, rgba(12,13,13,0.5) 52%, rgba(12,13,13,0.93) 100%);
  }
  /* Regla lima que se traza al pasar o al quedar seleccionada */
  #servicios .svc-row::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 3;
    background: var(--accent); transform: scaleX(0); transform-origin: left;
    transition: transform .45s var(--ease);
  }
  #servicios .svc-row:hover::before, #servicios .svc-row:focus-visible::before,
  #servicios .svc-row.on::before { transform: scaleX(1); }
  #servicios .svc-row:hover .svc-row__img, #servicios .svc-row:focus-visible .svc-row__img,
  #servicios .svc-row.on .svc-row__img {
    filter: grayscale(0.25) brightness(0.6) contrast(1.06);
    transform: scale(1.09);
  }

  #servicios .svc-row__num {
    position: absolute; top: clamp(12px, 1.4vw, 18px); left: clamp(14px, 1.5vw, 20px); z-index: 2;
    font-family: var(--font-mono); font-weight: 600; font-size: 12px;
    letter-spacing: 0.16em; color: var(--ink-faint);
    transition: color .3s var(--ease);
  }
  #servicios .svc-row:hover .svc-row__num, #servicios .svc-row.on .svc-row__num { color: var(--accent); }
  #servicios .svc-row__name {
    position: relative; z-index: 2; color: var(--ink);
    font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
    text-wrap: balance;
  }
  #servicios .svc-row__desc {
    display: block; position: relative; z-index: 2;
    font-size: 12px; line-height: 1.55; color: var(--ink-mute);
    margin-top: 0; max-height: 0; opacity: 0; overflow: hidden;
    transform: translateY(6px);
    transition: max-height .5s var(--ease), opacity .35s var(--ease), transform .5s var(--ease), margin-top .5s var(--ease);
  }
  #servicios .svc-row:hover .svc-row__desc, #servicios .svc-row:focus-visible .svc-row__desc,
  #servicios .svc-row.on .svc-row__desc {
    max-height: 7.5em; opacity: 1; transform: none; margin-top: 9px;
  }

  /* CTA de sección: mismo bloque lima que Proyectos, al pie de la banda */
  #servicios .svc-lnk-flow {
    display: inline-flex; align-items: center; gap: 10px; align-self: flex-start;
    background: var(--accent); color: var(--bg); border-bottom: 0;
    padding: 13px 22px; font-size: 11px; font-weight: 600;
    letter-spacing: 0.2em; text-transform: uppercase;
    transition: background .3s var(--ease), box-shadow .3s var(--ease), transform .25s var(--ease);
  }
  #servicios .svc-lnk-flow:hover {
    background: #f1ff66; color: var(--bg);
    box-shadow: 0 0 0 4px var(--accent-dim); transform: translateY(-1px);
  }

  /* Proyectos conserva su escenario; solo iguala el pie con el mosaico */
  #proyectos .pj-foot { align-items: flex-end; }
}

/* Móvil: la etiqueta titula el mapa (va ARRIBA, como las demás) */
@media (max-width: 920px) {
  #nosotros .nos-c__map .nos-c__chapter--map { order: -1; margin-bottom: clamp(10px, 1.8vh, 16px); }
}


/* =====================================================================
   LEGAL — consentimiento en el formulario · enlaces legales · aviso cookies
   ===================================================================== */
.ct-consent { margin-top: clamp(18px, 2.6vh, 26px); display: flex; align-items: flex-start; gap: 12px; max-width: 72ch; }
.ct-consent input[type="checkbox"] { flex: none; width: 17px; height: 17px; margin-top: 2px; accent-color: var(--accent); cursor: pointer; }
.ct-consent label { font-size: 11.5px; line-height: 1.6; letter-spacing: 0.02em; color: var(--ink-mute); cursor: pointer; text-wrap: pretty; }
.ct-consent a { color: var(--ink); border-bottom: 1px solid var(--line-strong); transition: color .3s var(--ease), border-color .3s var(--ease); }
.ct-consent a:hover { color: var(--accent); border-color: var(--accent); }
.ct-consent.is-missing { animation: ctShake .5s var(--ease); }
.ct-consent.is-missing label { color: var(--accent); }
.ct-consent.is-missing input[type="checkbox"] { box-shadow: 0 0 0 4px var(--accent-dim); }
@keyframes ctShake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)} }

.ct-legal { margin-top: clamp(14px, 2vh, 20px); display: flex; flex-wrap: wrap; align-items: center; gap: 8px 26px; }
.ct-legal a { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); border-bottom: 1px solid transparent; padding-bottom: 2px; transition: color .3s var(--ease), border-color .3s var(--ease); }
.ct-legal a:hover { color: var(--accent); border-color: var(--accent); }

.ck { position: fixed; z-index: 200; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); width: min(690px, calc(100vw - 40px)); transform: translate(-50%, 20px); opacity: 0; pointer-events: none; transition: opacity .4s var(--ease), transform .55s var(--ease); }
.ck.on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.ck__in { position: relative; background: rgba(17,17,17,0.97); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid var(--line-strong); padding: 18px 22px 18px 24px; display: flex; align-items: center; gap: 20px 26px; flex-wrap: wrap; box-shadow: 0 24px 60px rgba(0,0,0,.55); }
.ck__in::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); }
.ck__txt { flex: 1 1 300px; font-size: 11.5px; line-height: 1.65; color: var(--ink-mute); margin: 0; }
.ck__txt b { color: var(--ink); font-weight: 600; letter-spacing: 0.04em; }
.ck__txt a { color: var(--ink); border-bottom: 1px solid var(--line-strong); }
.ck__txt a:hover { color: var(--accent); border-color: var(--accent); }
.ck__acts { flex: none; display: flex; align-items: center; gap: 10px; }
.ck__btn { font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; padding: 11px 18px; min-height: 40px; border: 1px solid var(--line-strong); color: var(--ink-mute); transition: color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease); }
.ck__btn:hover { color: var(--ink); border-color: var(--ink-faint); }
.ck__btn--yes { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.ck__btn--yes:hover { background: #f2ff5c; border-color: #f2ff5c; color: var(--on-accent); }

@media (max-width: 920px) {
  #contacto .ct-consent { margin-top: 20px; }
  #contacto .ct-consent input[type="checkbox"] { width: 20px; height: 20px; }
  #contacto .ct-consent label { font-size: 12px; padding: 4px 0; }
  #contacto .ct-legal { margin-top: 16px; gap: 10px 20px; display: flex !important; }
  .ck { left: 12px; right: 12px; width: auto; transform: translateY(20px); bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  .ck.on { transform: translateY(0); }
  .ck__in { padding: 16px 18px 16px 20px; gap: 16px; }
  .ck__acts { width: 100%; }
  .ck__btn { flex: 1 1 auto; justify-content: center; min-height: 46px; }
}


/* =====================================================================
   COBERTURA VIVA · el área lima del mapa late. El envoltorio conserva la
   proporción exacta del archivo (628×397), así el foco cae siempre sobre
   la mancha del Estado de México sin importar el tamaño de pantalla.
   ===================================================================== */
.nos-c__mapwrap { position: relative; display: block; aspect-ratio: 628 / 397; line-height: 0; }
.nos-c__mapwrap > img { width: 100%; height: 100%; object-fit: contain; }
.nos-c__pulse {
  position: absolute; left: 57.7%; top: 70.8%; width: 27%; aspect-ratio: 1;
  transform: translate(-50%, -50%); pointer-events: none; z-index: 2;
}
.nos-c__pulse::before, .nos-c__pulse::after { content: ''; position: absolute; inset: 0; border-radius: 50%; }
/* Resplandor que respira sobre la mancha */
.nos-c__pulse::before {
  background: radial-gradient(circle, rgba(230,254,44,.5) 0%, rgba(230,254,44,.22) 38%, rgba(230,254,44,0) 68%);
  mix-blend-mode: screen; animation: nosGlow 3.6s cubic-bezier(.45,0,.55,1) infinite;
}
/* Sin onda: el latido es solo el resplandor sobre la zona de cobertura */
.nos-c__pulse::after { display: none; }
@keyframes nosGlow {
  0%, 100% { opacity: .34; transform: scale(.92); }
  50%      { opacity: .85; transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  .nos-c__pulse::before { animation: none; opacity: .55; }
}


/* =====================================================================
   05 FILOSOFÍA · las dos columnas miden lo mismo
   El método dejaba de repartirse a lo alto (space-evenly sobre toda la
   pantalla) mientras la columna izquierda quedaba compacta: de ahí la
   diferencia de alturas. Ahora los cuatro puntos guardan un ritmo propio y
   el bloque se centra, igual que el manifiesto y sus pilares.
   ===================================================================== */
@media (min-width: 921px) and (min-height: 541px) {
  #filosofia .phil-a__method { justify-content: center; }
  #filosofia .phil-a__list {
    flex: none; justify-content: flex-start;
    gap: clamp(24px, 3.6vh, 44px);
  }
  /* Ambos apartados ganan altura: los pilares se descuelgan más del manifiesto
     y el método abre su ritmo, sin llegar al estirado de antes. */
  #filosofia .phil-a__pillars { margin-top: clamp(44px, 8vh, 96px); }
}

/* =====================================================================
   01 INICIO · obra en movimiento de fondo
   La excavadora se retira: el fondo lo hace el vídeo de obra, muy bajado de
   luz y con un velo negro encima para que el titular conserve contraste.
   En teléfono no se carga (peso y batería) y con movimiento reducido se
   congela en su primer fotograma.
   ===================================================================== */
.hero-vid {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: .34; filter: grayscale(.3) contrast(1.06) brightness(.8);
  pointer-events: none;
}
.hero-veil {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(10,10,10,.92) 0%, rgba(10,10,10,.55) 46%, rgba(10,10,10,.3) 100%),
    linear-gradient(0deg, rgba(10,10,10,.9) 0%, rgba(10,10,10,.2) 40%, rgba(10,10,10,.55) 100%);
}
.hero-floor { display: none; }
@media (max-width: 920px) { .hero-vid { display: none; } }
@media (prefers-reduced-motion: reduce) { .hero-vid { display: none; } }

/* Sin flechas en los botones (PC y teléfono): el rótulo basta. */
.btn-circ .circ,.lnk>i,.card-quote i,.btn-circ i,.hero-contact-mob i,.sec-cta-top i{display:none!important}
.pj-foot__lnk::after,.svc-quote::after,.lnk::after,.btn-circ::after,.card-quote::after{content:none!important}