/* ==========================================================
   Página "Nosotros" — v3
   Scopeado bajo .nos para no afectar el resto del sitio.
   Hereda los tokens de marca del :root global (azul H264).

   RITMO DE FONDOS (en la v2 todo era blanco y las secciones se
   confundían entre sí): hero blanco · cifras azul · historia tinte ·
   manifiesto blanco · equipo azul oscuro · sedes tinte · cierre blanco.
   Cada sección abre con regla superior + eyebrow numerado.
   ========================================================== */
.nos{
  --font-display:"Sora",sans-serif;
  --font-body:"Plus Jakarta Sans",sans-serif;
  /* Curvas: ease-out fuerte para entradas, in-out para movimiento en pantalla */
  --out:cubic-bezier(.23,1,.32,1);
  --inout:cubic-bezier(.77,0,.175,1);
  /* Sombras tintadas con el hue de marca — nunca negro puro */
  --sh-sm:0 9px 22px -13px rgba(27,36,80,.24);
  --sh:0 18px 42px -22px rgba(27,36,80,.34);
  --sh-lg:0 38px 80px -40px rgba(27,36,80,.44);
  --sp:clamp(56px,6.4vw,92px);   /* padding vertical de sección */
  /* Tinte con algo de marca: --bg-tint (#f8fafc) era tan claro que no se
     distinguía del blanco y las secciones se fundían entre sí. */
  --nos-tint:color-mix(in srgb,var(--brand) 5%,var(--white));
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--white);
}
.nos img{display:block;max-width:100%}
.nos-wrap{max-width:1180px;margin:0 auto;padding:0 46px}

/* ---------- Cabecera de sección: regla + eyebrow numerado ---------- */
.nos-sec-head{display:flex;align-items:baseline;gap:14px;
  padding-top:18px;border-top:1px solid var(--line);margin-bottom:26px}
.nos-sec-head .num{font-family:var(--font-display);font-weight:800;font-size:12px;
  letter-spacing:.04em;color:var(--brand);font-variant-numeric:tabular-nums}
.nos-sec-head .lbl{font-size:10.5px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-soft)}
.nos-sec-head .rule{flex:1;height:1px;background:var(--line)}
/* variante sobre fondo oscuro */
.nos-dark .nos-sec-head{border-top-color:rgba(255,255,255,.16)}
.nos-dark .nos-sec-head .num{color:var(--brand-accent)}
.nos-dark .nos-sec-head .lbl{color:rgba(255,255,255,.6)}
.nos-dark .nos-sec-head .rule{background:rgba(255,255,255,.16)}

.nos-eyebrow{display:inline-flex;align-items:center;gap:8px;
  background:var(--brand-soft);color:var(--brand-deep);
  border-radius:999px;padding:6px 14px;
  font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.nos-eyebrow::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--brand)}
.nos h2{font-family:var(--font-display);font-weight:800;
  font-size:clamp(26px,3.2vw,40px);line-height:1.12;letter-spacing:-.025em;
  color:var(--navy);text-wrap:balance}
.nos h2 em{font-style:normal;color:var(--brand)}
.nos .nos-lead{font-size:15.5px;line-height:1.62;color:var(--ink-soft);max-width:56ch;text-wrap:pretty}
.nos .nos-lead b{color:var(--ink);font-weight:600}
.nos-dark h2{color:#fff}
.nos-dark h2 em{color:var(--brand-accent)}
.nos-dark .nos-lead{color:rgba(255,255,255,.7)}
.nos-dark .nos-lead b{color:#fff}

/* ---------- Botón pill con icono anidado ---------- */
.nos-btn{display:inline-flex;align-items:center;gap:12px;
  border:none;border-radius:999px;cursor:pointer;text-decoration:none;
  padding:11px 11px 11px 24px;
  font-family:var(--font-display);font-weight:600;font-size:13.5px;
  transition:transform 160ms var(--out),background 200ms var(--out),box-shadow 200ms var(--out),color 200ms var(--out)}
.nos-btn .ic{width:32px;height:32px;flex:none;border-radius:50%;
  display:grid;place-items:center;
  transition:transform 200ms var(--out),background 200ms var(--out)}
.nos-btn .ic svg{width:15px;height:15px}
.nos-btn:active{transform:scale(.97)}
.nos-btn:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
@media (hover:hover) and (pointer:fine){
  .nos-btn:hover{transform:translateY(-2px)}
  .nos-btn:hover .ic{transform:translate(3px,-1px)}
  .nos-btn--solid:hover{background:var(--brand-deep)}
  .nos-btn--solid:hover .ic{background:rgba(255,255,255,.24)}
  .nos-btn--ghost:hover{color:var(--brand-deep)}
  .nos-btn--outline:hover{background:rgba(255,255,255,.1)}
}
.nos-btn--solid{background:var(--navy);color:#fff;box-shadow:var(--sh-sm)}
.nos-btn--solid .ic{background:rgba(255,255,255,.14)}
.nos-btn--ghost{background:var(--white);color:var(--navy);box-shadow:inset 0 0 0 1px var(--line),var(--sh-sm)}
.nos-btn--ghost .ic{background:var(--brand-soft);color:var(--brand-deep)}
.nos-btn--light{background:#fff;color:var(--brand-deep)}
.nos-btn--light .ic{background:var(--brand-soft)}
.nos-btn--outline{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.32)}
.nos-btn--outline .ic{background:rgba(255,255,255,.14)}

/* ==========================================================
   1 · HERO
   ========================================================== */
.nos-hero{position:relative;isolation:isolate;overflow:hidden;
  padding:clamp(92px,10vw,140px) 0 clamp(48px,6vw,76px)}
.nos-hero-bg{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.nos-hero-bg::before{content:"";position:absolute;inset:0;
  background-image:radial-gradient(circle at center,
    color-mix(in srgb,var(--navy) 9%,transparent) 1px,transparent 1.4px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(120% 110% at 62% 26%,#000 42%,transparent 100%);
          mask-image:radial-gradient(120% 110% at 62% 26%,#000 42%,transparent 100%);
  opacity:.55}
.nos-hero-bg::after{content:"";position:absolute;width:660px;height:660px;
  right:-160px;top:-220px;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--brand) 17%,transparent) 0%,transparent 66%);
  filter:blur(30px)}
/* La rejilla del hero NO usa .nos-wrap: replica su sangría a la izquierda
   (para que el texto quede alineado con el resto de la página) y deja que
   la columna derecha llegue hasta el filo del navegador. */
.nos-hero-grid{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:52px;align-items:center;max-width:none;
  padding-left:max(46px,calc((100% - 1180px) / 2 + 46px));padding-right:0}
.nos-hero h1{font-family:var(--font-display);font-weight:800;
  font-size:clamp(32px,3.9vw,48px);line-height:1.08;letter-spacing:-.035em;
  color:var(--navy);margin:18px 0 18px;text-wrap:balance}
.nos-hero h1 em{font-style:normal;color:var(--brand)}
.nos-hero .nos-lead{font-size:16.5px;max-width:50ch}
.nos-hero-acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.nos-hero-facts{display:flex;flex-wrap:wrap;gap:0;margin-top:38px;
  border-top:1px solid var(--line);padding-top:22px}
.nos-hero-facts div{padding-right:30px;margin-right:30px;border-right:1px solid var(--line)}
.nos-hero-facts div:last-child{border-right:none;margin-right:0;padding-right:0}
.nos-hero-facts .k{font-family:var(--font-display);font-weight:800;font-size:25px;
  line-height:1;letter-spacing:-.02em;color:var(--navy);font-variant-numeric:tabular-nums}
.nos-hero-facts .v{font-size:11.5px;color:var(--ink-soft);margin-top:5px;line-height:1.3}

/* ---------- Foto a sangre: se sale del contenedor hasta el filo derecho ----------
   La columna izquierda conserva la alineación de los 1180px del sitio;
   la derecha rompe la caja y llega al borde del navegador. */
.nos-hero-shot{position:relative;margin:0;
  border-radius:34px 0 0 34px;overflow:hidden;
  background:var(--brand-soft);
  box-shadow:-24px 30px 70px -34px rgba(27,36,80,.45);
}
/* El recorte va en la IMG, no en el figure: con clip-path en el elemento que
   observa IntersectionObserver, el navegador lo lee como sin área visible y
   nunca dispara el reveal. */
.nos-hero-shot img{width:100%;height:clamp(400px,46vw,556px);
  object-fit:cover;object-position:center 32%;
  clip-path:inset(0 0 100% 0);transition:clip-path 760ms var(--out)}
.rv.in.nos-hero-shot img{clip-path:inset(0 0 0 0)}
/* Velo inferior para que la etiqueta se lea sobre cualquier foto */
.nos-hero-shot::after{content:"";position:absolute;inset:auto 0 0 0;height:46%;pointer-events:none;
  background:linear-gradient(to top,rgba(0,13,79,.72) 0%,rgba(0,13,79,.28) 46%,transparent 100%)}
.nos-hero-cap{position:absolute;left:26px;bottom:24px;z-index:2;
  display:flex;align-items:center;gap:11px;
  background:rgba(255,255,255,.94);border-radius:16px;padding:12px 16px;
  box-shadow:var(--sh);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.nos-hero-cap .dot{width:8px;height:8px;border-radius:50%;background:var(--brand);flex:none}
.nos-hero-cap b{display:block;font-family:var(--font-display);font-weight:700;
  font-size:13px;letter-spacing:-.01em;color:var(--navy)}
.nos-hero-cap span{display:block;font-size:11.5px;color:var(--ink-soft);margin-top:2px}

/* ==========================================================
   2 · CINTA DE CIFRAS
   ========================================================== */
.nos-figs{position:relative;overflow:hidden;
  background:linear-gradient(135deg,var(--brand-deep) 0%,var(--navy-900) 62%,var(--navy-950) 100%);
  color:#fff;padding:clamp(44px,5vw,62px) 0}
.nos-figs::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(circle at center,rgba(255,255,255,.09) 1px,transparent 1.4px);
  background-size:24px 24px;opacity:.6}
.nos-figs-grid{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.nos-figs-grid > div{padding:0 22px;border-left:1px solid rgba(255,255,255,.14)}
.nos-figs-grid > div:first-child{border-left:none;padding-left:0}
.nos-figs .k{font-family:var(--font-display);font-weight:800;
  font-size:clamp(30px,3.6vw,44px);line-height:1;letter-spacing:-.03em;
  color:#fff;font-variant-numeric:tabular-nums}
.nos-figs .k .u{color:var(--brand-accent);margin-left:2px}
.nos-figs .v{font-size:12.5px;line-height:1.45;color:rgba(255,255,255,.72);margin-top:10px;max-width:20ch}

/* ==========================================================
   3 · HISTORIA (fondo tinte)
   ========================================================== */
.nos-story{padding:var(--sp) 0;background:var(--nos-tint)}
.nos-story-grid{display:grid;grid-template-columns:.86fr 1.14fr;gap:60px;align-items:start}
.nos-story-aside{position:sticky;top:104px}
.nos-story-aside h2{margin:14px 0 14px}
.nos-story-aside .nos-lead{font-size:15px}
/* Figura con pie: la foto no es de archivo de época, el pie lo dice claro */
.nos-shot{margin:0;position:relative}
.nos-shot img{width:100%;object-fit:cover;display:block;
  border-radius:22px;box-shadow:var(--sh);background:var(--brand-soft)}
.nos-shot figcaption{margin-top:10px;font-size:11.5px;line-height:1.45;
  color:var(--ink-soft);padding-left:13px;position:relative}
.nos-shot figcaption::before{content:"";position:absolute;left:0;top:5px;
  width:3px;height:calc(100% - 10px);border-radius:2px;background:var(--brand)}
.nos-story-shot{margin-top:26px}
.nos-story-shot img{aspect-ratio:4/3;object-position:center 38%}
.nos-story-note{display:flex;gap:11px;align-items:flex-start;margin-top:18px;
  background:var(--white);border-radius:14px;padding:14px 16px;
  box-shadow:inset 0 0 0 1px var(--line);
  font-size:12.5px;line-height:1.5;color:var(--brand-deep)}
.nos-story-note svg{width:17px;height:17px;flex:none;margin-top:1px}
.nos-story-note b{font-weight:700}

.nos-tl{position:relative;padding-left:44px;list-style:none;margin:0}
.nos-tl::before{content:"";position:absolute;left:13px;top:8px;bottom:8px;width:2px;
  background:linear-gradient(180deg,var(--brand) 0%,color-mix(in srgb,var(--brand) 24%,transparent) 72%,transparent 100%)}
.nos-tl-item{position:relative;padding-bottom:34px}
.nos-tl-item:last-child{padding-bottom:0}
.nos-tl-item::before{content:"";position:absolute;left:-38px;top:6px;width:14px;height:14px;
  border-radius:50%;background:var(--brand);border:3px solid var(--nos-tint);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 16%,transparent);
  transition:transform 200ms var(--out)}
.nos-tl-item:last-child::before{background:var(--navy)}
@media (hover:hover) and (pointer:fine){.nos-tl-item:hover::before{transform:scale(1.2)}}
.nos-tl-yr{font-family:var(--font-display);font-weight:800;font-size:13px;
  letter-spacing:.06em;color:var(--brand);font-variant-numeric:tabular-nums}
.nos-tl-item h3{font-family:var(--font-display);font-weight:700;font-size:19px;
  letter-spacing:-.015em;color:var(--navy);margin:5px 0 7px}
.nos-tl-item p{font-size:14px;line-height:1.6;color:var(--ink-soft);max-width:52ch}
.nos-tl-item p b{color:var(--ink);font-weight:600}
.nos-tl-shot{margin-top:16px;max-width:420px}
.nos-tl-shot img{aspect-ratio:16/7;border-radius:16px;object-position:center 40%}

/* ==========================================================
   4 · EL PROCESO — "Cómo trabajamos"
   Cuatro pasos con interruptor propietario / arrendatario.
   Cada paso declara quién hace el trabajo: en la ruta del
   propietario, tres de los cuatro los hacemos nosotros.
   ========================================================== */
.nos-proc{padding:var(--sp) 0;background:var(--white)}
.nos-proc-head{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;
  align-items:end;margin-bottom:36px}
.nos-proc-head h2{margin:0 0 14px}

/* Interruptor de rol */
.nos-switch{display:inline-flex;position:relative;background:var(--nos-tint);
  border-radius:999px;padding:5px;box-shadow:inset 0 0 0 1px var(--line);
  justify-self:start}
.nos-switch button{position:relative;z-index:1;border:none;background:transparent;
  cursor:pointer;border-radius:999px;padding:11px 22px;
  font-family:var(--font-display);font-weight:600;font-size:13.5px;
  color:var(--ink-soft);white-space:nowrap;
  transition:color 220ms var(--out)}
.nos-switch button:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
/* Pastilla que se desliza entre las dos opciones */
.nos-switch .thumb{position:absolute;z-index:0;top:5px;bottom:5px;left:5px;
  border-radius:999px;background:var(--navy);box-shadow:var(--sh-sm);
  transition:transform 320ms var(--inout),width 320ms var(--inout)}
.nos-proc[data-rol="prop"] .nos-switch button[data-rol="prop"],
.nos-proc[data-rol="arr"]  .nos-switch button[data-rol="arr"]{color:#fff}

/* Rejilla de pasos */
.nos-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;list-style:none;margin:0;padding:0}
.nos-step{position:relative;padding:30px 26px 26px 0}
.nos-step + .nos-step{padding-left:26px}
/* Riel horizontal con el nodo de cada paso */
.nos-step::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:var(--line)}
.nos-step:first-child::before{border-radius:2px 0 0 2px}
.nos-step::after{content:"";position:absolute;left:0;top:-5px;width:12px;height:12px;
  border-radius:50%;background:var(--white);
  box-shadow:inset 0 0 0 2.5px var(--brand);
  transition:box-shadow 260ms var(--out),transform 260ms var(--out)}
.nos-step + .nos-step::after{left:26px}
.nos-step-n{font-family:var(--font-display);font-weight:800;font-size:12.5px;
  letter-spacing:.08em;color:var(--brand);font-variant-numeric:tabular-nums}
.nos-step h3{font-family:var(--font-display);font-weight:700;font-size:18px;
  letter-spacing:-.02em;color:var(--navy);margin:9px 0 8px;line-height:1.25}
.nos-step p{font-size:13.5px;line-height:1.58;color:var(--ink-soft)}
.nos-step p b{color:var(--ink);font-weight:600}
.nos-step-who{display:inline-flex;align-items:center;gap:6px;margin-top:14px;
  font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  border-radius:999px;padding:5px 11px}
.nos-step-who::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}
.nos-step-who.us{background:var(--brand-soft);color:var(--brand-deep)}
.nos-step-who.you{background:var(--nos-tint);color:var(--ink-soft);
  box-shadow:inset 0 0 0 1px var(--line)}
@media (hover:hover) and (pointer:fine){
  .nos-step:hover::after{transform:scale(1.25);box-shadow:inset 0 0 0 6px var(--brand)}
}

/* Cambio de ruta: el conjunto que sale se apaga, el que entra sube */
.nos-proc-track{position:relative}
.nos-route{opacity:0;visibility:hidden;position:absolute;inset:0;
  transition:opacity 260ms var(--out),transform 260ms var(--out);
  transform:translateY(8px)}
.nos-route.on{opacity:1;visibility:visible;position:static;transform:none}
.nos-proc-foot{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:34px;
  padding-top:22px;border-top:1px solid var(--line)}
.nos-proc-foot p{font-size:13.5px;line-height:1.55;color:var(--ink-soft);flex:1;min-width:260px}
.nos-proc-foot p b{color:var(--ink);font-weight:600}

/* ==========================================================
   5 · EQUIPO (fondo oscuro) — directorio "a quién llamas"
   ========================================================== */
.nos-team{padding:var(--sp) 0;position:relative;overflow:hidden;
  background:linear-gradient(165deg,var(--navy-900) 0%,var(--navy-950) 58%,var(--brand-deep) 190%);
  color:#fff}
.nos-team::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(circle at center,rgba(255,255,255,.07) 1px,transparent 1.4px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(100% 80% at 78% 8%,#000 30%,transparent 100%);
          mask-image:radial-gradient(100% 80% at 78% 8%,#000 30%,transparent 100%)}
.nos-team-inner{position:relative}
.nos-team-top{display:grid;grid-template-columns:.82fr 1.18fr;gap:52px;align-items:end;margin-bottom:36px}
.nos-team-top h2{margin-bottom:0}

/* Directorio por área */
.nos-dir{list-style:none;margin:0;padding:0;border-top:1px solid rgba(255,255,255,.14)}
.nos-dir-row{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;
  padding:17px 4px;border-bottom:1px solid rgba(255,255,255,.14);
  transition:background 200ms var(--out),padding-left 220ms var(--out)}
.nos-dir-chip{font-family:var(--font-display);font-weight:700;font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;
  background:rgba(255,255,255,.09);color:#fff;border-radius:999px;padding:6px 13px;
  white-space:nowrap;transition:background 200ms var(--out),color 200ms var(--out)}
.nos-dir-row p{font-size:14.5px;line-height:1.5;color:rgba(255,255,255,.74)}
.nos-dir-row p b{color:#fff;font-weight:600}
.nos-dir-go{width:30px;height:30px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:rgba(255,255,255,.08);color:#fff;
  transition:transform 220ms var(--out),background 200ms var(--out),color 200ms var(--out)}
.nos-dir-go svg{width:14px;height:14px}
@media (hover:hover) and (pointer:fine){
  .nos-dir-row:hover{background:rgba(255,255,255,.045);padding-left:14px}
  .nos-dir-row:hover .nos-dir-chip{background:var(--brand-accent);color:var(--navy-950)}
  .nos-dir-row:hover .nos-dir-go{background:var(--brand-accent);color:var(--navy-950);transform:translateX(3px)}
}

/* Tira de tres tomas del día a día */
.nos-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:36px}
.nos-strip > figure{margin:0}
.nos-strip .nos-sh-img{position:relative;aspect-ratio:1/1;border-radius:18px;overflow:hidden;
  background:rgba(255,255,255,.06)}
/* Las tres tomas vienen en formatos distintos (una apaisada, dos verticales):
   cover con el encuadre alto para que ningún recorte se coma las caras. */
.nos-strip .nos-sh-img img{width:100%;height:100%;object-fit:cover;object-position:center 30%;
  transition:transform 620ms var(--out)}
/* Encuadre por foto: en caja cuadrada cada una necesita su propio punto de
   anclaje para que el recorte no se coma caras ni el gesto que cuenta. */
.nos-strip .sh-atencion img{object-position:center 46%}  /* apaisada: la mesa y los dos */
.nos-strip .sh-equipo img{object-position:center 28%}    /* vertical: los cuatro de pie */
.nos-strip .sh-firma img{object-position:center 44%}     /* vertical: las manos firmando */
@media (hover:hover) and (pointer:fine){
  .nos-strip figure:hover .nos-sh-img img{transform:scale(1.04)}
}
.nos-strip figcaption{display:flex;align-items:baseline;gap:9px;margin-top:10px;
  font-size:11px;line-height:1.35;color:rgba(255,255,255,.6)}
.nos-strip figcaption .n{font-family:var(--font-display);font-weight:800;font-size:10px;
  color:var(--brand-accent);letter-spacing:.06em;flex:none}
/* ==========================================================
   6 · SEDES (fondo tinte)
   ========================================================== */
.nos-sedes{padding:var(--sp) 0;background:var(--nos-tint)}
.nos-sedes-head{max-width:620px;margin-bottom:36px}
.nos-sedes-head h2{margin:0 0 14px}
.nos-sedes-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.nos-sede{background:var(--card);border-radius:26px;padding:10px;
  box-shadow:inset 0 0 0 1px var(--line),var(--sh-sm);
  transition:transform 260ms var(--out),box-shadow 260ms var(--out)}
@media (hover:hover) and (pointer:fine){
  .nos-sede:hover{transform:translateY(-5px);
    box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--brand) 22%,transparent),var(--sh)}
  .nos-sede:hover .nos-sede-img img{transform:scale(1.05)}
}
.nos-sede-img{border-radius:18px;overflow:hidden;aspect-ratio:16/10;background:var(--brand-soft);position:relative}
.nos-sede-img img{width:100%;height:100%;object-fit:cover;transition:transform 620ms var(--out)}
.nos-sede-tag{position:absolute;left:14px;top:14px;background:rgba(255,255,255,.94);
  color:var(--brand-deep);border-radius:999px;padding:5px 12px;
  font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  box-shadow:var(--sh-sm)}
/* Pin con pulso — señala que la oficina es un sitio real */
.nos-pin{position:absolute;right:16px;bottom:16px;width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;background:var(--brand);color:#fff;
  box-shadow:0 8px 20px -8px color-mix(in srgb,var(--brand-deep) 80%,transparent)}
.nos-pin svg{width:17px;height:17px}
.nos-pin::before{content:"";position:absolute;inset:0;border-radius:50%;
  border:2px solid var(--brand);animation:nos-pulse 2.6s var(--out) infinite}
@keyframes nos-pulse{
  0%{transform:scale(1);opacity:.7}
  70%{transform:scale(1.85);opacity:0}
  100%{transform:scale(1.85);opacity:0}
}
.nos-sede-body{padding:20px 18px 14px}
.nos-sede-body h3{font-family:var(--font-display);font-weight:700;font-size:20px;
  letter-spacing:-.02em;color:var(--navy);margin-bottom:13px}
.nos-sede-rw{display:flex;gap:10px;align-items:flex-start;
  font-size:13.5px;line-height:1.5;color:var(--ink-soft);margin-bottom:9px}
.nos-sede-rw svg{width:16px;height:16px;flex:none;margin-top:2px;color:var(--brand-accent)}
.nos-sede-acts{display:flex;flex-wrap:wrap;gap:9px;margin-top:16px}
.nos-sede-acts .nos-btn{font-size:12.5px;padding:8px 8px 8px 18px}
.nos-sede-acts .nos-btn .ic{width:27px;height:27px}
.nos-sede-acts .nos-btn .ic svg{width:13px;height:13px}

/* Franja de cobertura */
.nos-cover{margin-top:24px;background:var(--white);border-radius:20px;padding:22px 24px;
  box-shadow:inset 0 0 0 1px var(--line);
  display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.nos-cover-t{font-family:var(--font-display);font-weight:700;font-size:12.5px;
  color:var(--navy);margin-right:6px}
.nos-cover .z{font-size:12.5px;color:var(--ink-soft);
  background:var(--bg-tint);border-radius:999px;padding:6px 13px;
  transition:background 200ms var(--out),color 200ms var(--out)}
@media (hover:hover) and (pointer:fine){
  .nos-cover .z:hover{background:var(--brand-soft);color:var(--brand-deep)}
}

/* ==========================================================
   7 · CIERRE
   ========================================================== */
.nos-cta{padding:var(--sp) 0;background:var(--white)}
.nos-cta-box{position:relative;overflow:hidden;border-radius:32px;
  background:linear-gradient(140deg,var(--brand) 0%,var(--brand-deep) 46%,var(--navy-900) 100%);
  color:#fff;padding:clamp(38px,5vw,64px);box-shadow:var(--sh-lg);
  display:grid;grid-template-columns:1.25fr .75fr;gap:36px;align-items:center}
.nos-cta-box::before{content:"";position:absolute;width:520px;height:520px;
  right:-140px;bottom:-260px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.16) 0%,transparent 66%);pointer-events:none}
.nos-cta-box h2{color:#fff;font-size:clamp(24px,2.9vw,36px);margin-bottom:12px}
.nos-cta-box p{font-size:15px;line-height:1.6;color:rgba(255,255,255,.8);max-width:48ch}
.nos-cta-acts{position:relative;display:flex;flex-direction:column;gap:11px;align-items:stretch}
.nos-cta-acts .nos-btn{justify-content:space-between}

/* ==========================================================
   REVEAL AL SCROLL — entrada escalonada corta (55ms entre items)
   ========================================================== */
.nos .rv{opacity:0;transform:translateY(18px);
  transition:opacity 520ms var(--out),transform 520ms var(--out)}
.nos .rv.in{opacity:1;transform:none}
.nos .rv-g > *{opacity:0;transform:translateY(14px);
  transition:opacity 460ms var(--out),transform 460ms var(--out)}
.nos .rv-g.in > *{opacity:1;transform:none}
.nos .rv-g.in > *:nth-child(1){transition-delay:0ms}
.nos .rv-g.in > *:nth-child(2){transition-delay:55ms}
.nos .rv-g.in > *:nth-child(3){transition-delay:110ms}
.nos .rv-g.in > *:nth-child(4){transition-delay:165ms}
.nos .rv-g.in > *:nth-child(5){transition-delay:220ms}
.nos .rv-g.in > *:nth-child(6){transition-delay:275ms}
@media (prefers-reduced-motion:reduce){
  .nos .rv,.nos .rv-g > *{opacity:1;transform:none;transition:none}

  .nos-strip .nos-sh-img img,.nos-sede-img img{transition:none}
  .nos-pin::before{animation:none}
  .nos-step,.nos-dir-row,.nos-route{transition:none}
  .nos-hero-shot img{clip-path:none;transition:none}
  .nos-switch .thumb{transition:none}
}

/* ==========================================================
   RESPONSIVE
   ========================================================== */
@media (max-width:1080px){
  .nos-wrap{padding:0 32px}
  .nos-story-grid{grid-template-columns:1fr;gap:44px}
  .nos-proc-head{grid-template-columns:1fr;gap:22px;align-items:start}
  .nos-story-aside{position:static}
  .nos-steps{grid-template-columns:1fr 1fr;gap:0 0}
  .nos-step:nth-child(3),.nos-step:nth-child(4){margin-top:26px}
  .nos-story-shot{max-width:520px}
  .nos-decl{max-width:24ch}
  .nos-team-top{grid-template-columns:1fr;gap:24px;align-items:start}
}
@media (max-width:940px){
  .nos-hero{padding-top:clamp(84px,12vw,110px)}
  .nos-hero-grid{grid-template-columns:1fr;gap:44px}
  .nos-sheet{max-width:520px;margin:0 auto}
  .nos-figs-grid{grid-template-columns:1fr 1fr;gap:26px 16px}
  .nos-figs-grid > div:nth-child(odd){border-left:none;padding-left:0}
  .nos-cta-box{grid-template-columns:1fr;gap:28px}
}
@media (max-width:768px){
  .nos-wrap{padding:0 18px}
  /* El hero no usa .nos-wrap: su sangría izquierda se ajusta aparte */
  .nos-hero-grid{padding-left:18px}
  .nos-hero-shot{border-radius:22px 0 0 22px}
  .nos-hero-cap{left:16px;bottom:16px;padding:10px 14px}
  .nos-sedes-grid{grid-template-columns:1fr;gap:18px}
  .nos-hero-acts .nos-btn{width:100%;justify-content:space-between}
  .nos-hero-facts{gap:20px 0}
  .nos-hero-facts div{width:50%;padding-right:16px;margin-right:0;border-right:none}
  .nos-hero-facts div:nth-child(odd){border-right:1px solid var(--line)}
  /* En una columna estrecha los saltos manuales cortan mal: que fluya el texto */
  .nos-hero-facts .v br{display:none}
  .nos-hero-facts .v{font-size:11px}
  .nos-cta-acts .nos-btn{width:100%}
  .nos-tl{padding-left:34px}
  .nos-tl::before{left:9px}
  .nos-tl-item::before{left:-31px;width:12px;height:12px}

  .nos-steps{grid-template-columns:1fr;gap:0}
  .nos-step,.nos-step + .nos-step{padding:26px 0 22px 26px;margin-top:0}
  .nos-step:nth-child(3),.nos-step:nth-child(4){margin-top:0}
  /* En vertical el riel pasa a ser una línea a la izquierda */
  .nos-step::before{left:5px;right:auto;top:0;bottom:0;width:2px;height:auto}
  .nos-step::after,.nos-step + .nos-step::after{left:0;top:26px}
  /* Chip y flecha comparten la primera fila; el texto pasa completo debajo.
     Sin filas explícitas el auto-placement mandaba la flecha a una tercera fila. */
  .nos-dir-row{grid-template-columns:auto 1fr;gap:12px 14px}
  .nos-dir-chip{grid-column:1;grid-row:1}
  .nos-dir-go{grid-column:2;grid-row:1;justify-self:end}
  .nos-dir-row p{grid-column:1/3;grid-row:2}
  .nos-strip{grid-template-columns:1fr 1fr}
  .nos-strip > figure:last-child{display:none}
}
@media (max-width:560px){
  .nos-sheet{padding-left:20px;gap:16px 12px}
  .nos-sh-1{grid-column:2/13}
  .nos-sh-2{grid-column:1/9}
  .nos-sh-3{grid-column:4/13}
  .nos-strip{grid-template-columns:1fr}
  .nos-strip > figure:last-child{display:none}
}